第二次导航到它时未加载角组件

Question

在我的项目中，我有一个父shopping组件，其中包括2个子组件：

<div class="grid-container">
    <div class="grid-item" id="cart"><app-cart></app-cart></div>
    <div class="grid-item" id="categories"><app-categories></app-categories></div>

类别组件包括导航栏和路由器：

<nav class="navbar navbar-expand-lg navbar-dark">
    <ul class="navbar-nav mr-auto ">
       <span *ngFor="let cat of arrCategories; index as i">
           <li class="nav-item" [ngClass]="{'active': i===0}" >
              <a class="nav-link" routerLink="/shopping/products/{{cat.id}}" routerLinkActive="active">{{cat.name}}</a>
           </li>
        </span>
     </ul>
</nav>
<router-outlet></router-outlet>

单击导航栏项目时，我要将产品组件以及所选项目的ID加载到路由器中。

在categories组件的ngOnInit上，我是第一次加载产品，可以正常工作：

this.router.navigate([`/shopping/products/1`]); //load first category products

但是，当单击导航栏项目时，地址行上的url正在正确更新，但是产品组件没有再次加载。

此问题的解决方案是什么？

感谢您的帮助：）

Answer 1

Answer 2

localhost:3000/product-details/3/specs