工艺路线执行组件先于所有组件

Question

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

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

我有一个存储数据的categoryModule数组。

在ngOnInit方法的ProductsComponent中，我调用了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 },
        ]
    }
]

如果它不工作，提供我堆栈，我会为你解决它。