Блог

Главная - Вопросы по программированию - Как добавить функцию, которая прослушивает изменения в Angular?

Как добавить функцию, которая прослушивает изменения в Angular?

#angular #typescript #frontend #listener #product

#angular #typescript #интерфейс #прослушиватель #продукт

Вопрос:

У меня есть список продуктов, после нажатия на продукт открывается product-details, в котором есть сведения об этом продукте. URL-адрес — это идентификатор продукта, который получает и затем ищет этот продукт в базе данных. Но чтобы просмотреть данные для этого продукта, я должен нажать на кнопку. Как сделать это автоматически, а затем прослушать изменения?

product-details.component.ts:

 export class ProductDetalisComponent implements OnInit {
  private ngUnsubscribe = new Subject();

  product = [];
  product_id;

  constructor(private productService: ProductService, private route: ActivatedRoute) { }


  ngOnInit() {

    this.route.paramMap.pipe(takeUntil(this.ngUnsubscribe))
      .subscribe(params => 
      {
          this.product_id = [params.get('productId')];
          this.getProductById();
      });
  }

  getProductById() {
    this.productService.getProductById(this.product_id)
      .subscribe(
        res => {
          this.product = res;
        },
        err => console.log(err)
      );
  }

  ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }

}

product-details.component.html:

   <button type="button" (click)="getProductById();">Product</button>

  <p>Name: <a> {{product.name}} </a></p>
  <p>Price: <a> {{product.price}} </a></p>
  <p>Id: <a> {{product._id}} </a></p>

Ответ №1:

Вы имеете в виду что-то вроде этого?:

 export class ProductDetalisComponent implements OnInit {

  constructor(private productService: ProductService, private route: ActivatedRoute) { }

  product = [];
  product_id;

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.product_id = params.get('productId');
      this.getProductById(); // <=====
    });
  }

  getProductById() {
    this.productService.getProductById(this.product_id).subscribe(
      res => {
        console.log(res);
        this.product = res;
      },
      err => console.log(err)
    );
  }
}

Комментарии:

1. Да, это именно то, что я имею в виду: D Вау, я думал, что мне следует использовать observable или что-то в этом роде, но это так просто, и это работает. Большое вам спасибо за вашу помощь 🙂

2. Вы уже используете observable, и я вижу, что вы не отказываетесь от подписки, что может привести к утечке памяти. Я предлагаю вам взглянуть на эту статью: netbasal.com/when-to-unsubscribe-in-angular-d61c6b21bad3

3. Спасибо 🙂 По вашему совету я только что добавил туда функцию отмены подписки, но я не уверен, хорошо ли она работает, не могли бы вы проверить, правильно ли я это сделал? Я опубликую это в качестве следующего ответа

4. Не публикуйте это как ответ. Просто отредактируйте свой вопрос.

5. Хорошо, я полностью прочитал вашу статью. К сожалению, я только новичок и многое у меня впереди. Но большое вам спасибо 🙂 Я не заметил, что я поместил этот метод в неправильное место.