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

将将产品信息从id返回的代码移动到ngOnChanges（）函数。 Oninit函数仅在组件初始化时运行。您的代码第二次在初始化时不执行。

ngOnChanges（）-在Angular（重新设置数据绑定输入属性）时响应。该方法接收当前和先前属性值的SimpleChanges对象。

参考-https://angular.io/guide/lifecycle-hooks

Answer 2

这可能是由于路由问题。如果用户单击ID为3的产品，我们希望显示带有概述的产品详细信息页面：

localhost:3000/product-details/3/overview

用户单击“技术规格”时：

localhost:3000/product-details/3/specs

我们带孩子的路线如下：

export const routes: Routes = [
  { path: '', redirectTo: 'product-list', pathMatch: 'full' },
  { path: 'product-list', component: ProductList },
  { path: 'product-details/:id', component: ProductDetails,
    children: [
      { path: '', redirectTo: 'overview', pathMatch: 'full' },
      { path: 'overview', component: Overview },
      { path: 'specs', component: Specs }
    ]
  }
];

因此，每当用户使用“ localhost：3000 / product-details / 3 / overview”访问URL时，它将加载父组件[ProductDetails]和子组件[overview]。

这些子路线的组件将显示在哪里？就像在

`<router-outlet></router-outlet>`

Angular组件第二次导航时未加载

2 个答案: