Обновление списка при изменении параметров маршрута

Question

У меня есть компонент, в котором я получаю параметр маршрута:

export class CatalogComponent implements OnInit {

  category: number;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {

    this.route.paramMap.subscribe(parameters => {
      this.category = parameters.has('category') ? +parameters.get('category') : undefined;
    })

  }

}

Тогда по шаблону у меня есть:

<product-list [category]="category"></product-list>

И компонент ProductList:

export class ProductListComponent implements OnInit {

  @Input() category: number;

  products$: Observable<ProductListModel[]>;

  constructor(private productService: ProductService) { }

  ngOnInit() {

    this.products$ = this.getProducts();

  }

  private getProducts(): Observable<ProductListModel[]> {

    return this.productService.get(this.category);

  }

}

Проблема в том, что параметр маршрута category изменяет продукты, отображаемые компонентом ProductList, которые не обновляются.

Как я могу решить это?

Answer 1

вам нужно реализовать ngOnChanges в ProductListComponent

как показано ниже

ngOnChanges(changes: Record<keyof ProductListComponent, SimpleChange>) {

  if (changes.category && changes.category.currentValue) {

    // reload your data here
  }
}