Question

我有问题，我有ProductsService从服务器调用数据并存储在Array中，我有ProductsComponent组件是父组件，而我有ProductsListComponent ProductListItemsComponent是子组件。流程是，在ProductsService中，我有方法：

 getCategoryFromServer() {
    this.dataStorageServiceServiceta.getCategory().subscribe((category: CategoryModel[]) => {
      this.categoryModule = category;
      this.cateogoryChange.next(this.categoryModule.slice())
    })
  }

我有categoryModule数组，用于存储数据。

在ProductsComponent方法的ngOnInit中，我叫getCategoryFromServer方法：

ngOnInit() {
    this.productsService.getCategoryFromServer();
  }

ProductsComponent的模板是：

<div class="row">
      <div class="col-md-3 col-sm-12">
        <app-products-list></app-products-list>
      </div>
      <div class="col-md-9 col-sm-12">
        <div class="row" >
            <router-outlet></router-outlet> 
        </div>

      </div>

    </div>

我的屏幕显示为app-products-list组件，在这里我从serevice调用数据，您可以在图像上看到它的外观。 enter image description here。当我单击此列表中的某些项目时，使用[routerLink]="[products.name]"会显示我的组件ProductListItemsComponent，看起来像enter image description here。问题是当我刷新页面并首先执行ProductListItemsComponent，然后执行ProductsComponent之后，我的数组为空。你知道我该如何解决这个问题？

我的路由模块是：

const productsRoutes: Routes = [
    {
        path: 'productsList', component: ProductsComponent, children: [

            { path: ':category', component: ProductListItemsComponent },



        ]
    },

]
@NgModule({
    imports: [
        RouterModule.forChild(productsRoutes)
    ],
    exports: [
        RouterModule
    ]
})
export class ProductsRoutingModule {

}

Answer 1

您可以尝试一次吗？...

const productsRoutes: Routes = [
    { path: '', redirectTo: 'productsList', pathMatch: 'full' },

    {
        path: 'productsList', component: ProductsComponent, 
        children: [
            { path: ':category', component: ProductListItemsComponent },
        ]
    }
]

如果它不起作用，请给我stackbliz，我会为您解决。

首先路由执行组件

1 个答案: