Блог

У меня есть боковая панель с различными перенаправлениями определенных категорий продуктов, при нажатии на эти кнопки она перенаправляется на компонент, который получает параметры URL-адреса и обращается к сервису и извлекает данные этой конкретной категории, дело в том, что при первом нажатии на нее это работает, но во второйкогда этого не происходит, он только изменяет URL-адрес, но не обновляет данные

sidebar.component.html

 <div class="list-group">
  <a [routerLink]="['products/category']" [queryParams]="{name:category.name}" class="list-group-item"
     *ngFor="let category of categories">{{category.name}}</a>
</div>
  

И компонент, который делает волшебство

 export class ViewAllProductsByCategoryComponent implements OnInit {
  searchCategory: any;
  products: Product;

  constructor(private activatedRoute: ActivatedRoute, private productsService: ProductsService) {
  }

  ngOnInit(): void {
    
    this.activatedRoute.queryParams.subscribe(res => {
      this.searchCategory = res.name;
    });
    this.productsService.searchCategoryProducts(this.searchCategory).subscribe(res => {
      this.products = res;
      console.log(this.products);
    });
  }

}
  

Итак, как мне обновить данные?

Angular по умолчанию не выполняет повторную инициализацию уже загруженного компонента.

Но есть способ обойти эту функцию:

 let newLocation = `/pathName/5110`;
 // override default re use strategy
 this.router
    .routeReuseStrategy
    .shouldReuseRoute = function () {
        return false;
 };
 this.router
   .navigateByUrl(newLocation)
   .then(
   (worked) => {
     // Works only because we hooked
     // routeReuseStrategy.shouldReuseRoute 
     // and explicitly told it don't reuse
     // route which forces a reload.
     // Otherwise; the url will change but new
     // data will not display!
   },
   (error) => {
    debugger;
    }
 );
  

Просто установите для функции .shouldReuseRoute значение false, чтобы компонент перезагрузился.

Вот более подробная информация по этой теме. https://dev.to/jwp/angular-s-naviation-challenges-20i2

Вы также можете настроить маршрутизатор для повторного использования маршрута.

Я немного изменил ответ Джона, вот как я это исправил

  export class ViewAllProductsByCategoryComponent implements OnInit, OnDestroy {
      searchCategory: any;
      products: Product;
      mySubscription: any;
    
      constructor(private activatedRoute: ActivatedRoute,
                  private productsService: ProductsService,
                  private router: Router,
      ) {
        this.router.routeReuseStrategy.shouldReuseRoute = () => {
          return false;
        };
        this.mySubscription = this.router.events.subscribe((event) => {
          if (event instanceof NavigationEnd) {
            this.router.navigated = false;
          }
        });
    
      }
    
      ngOnInit(): void {
        this.activatedRoute.queryParams.subscribe(res => {
          this.searchCategory = res.name;
          console.log(this.searchCategory);
        });
    
        this.productsService.searchCategoryProducts(this.searchCategory).subscribe(res => {
          this.products = res;
          console.log(this.products);
        });
      }
    
      ngOnDestroy(): void {
        if (this.mySubscription) {
          this.mySubscription.unsubscribe();
        }
      }
    
    }