angular - 路由执行组件先于所有

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您可以在图像上看到它的样子。在此处输入图像描述。当我单击此列表中的某些项目时，会显示使用 [routerLink]="[products.name]"我的组件ProductListItemsComponent，如下所示在此处输入图像描述。问题是当我刷新页面并首先执行ProductListItemsComponent之后，ProductsComponent我的数组为空。你知道我该如何解决这个问题吗？

我的路由模块是：

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

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



        ]
    },

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

}

标签： angulartypescript

Answer 1

你可以试试这个一次吗......

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

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

如果它不起作用，请提供我 stackbliz，我会为你解决它。