Question

我有问题，我有ProductsService从服务器调用数据并存储在Array中，我有ProductsComponent组件是父组件，而我有ProductsListComponent SingleProductComponent是子组件。流程是，在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。问题是当我刷新页面并首先执行SingleProductComponent，然后执行ProductsComponent之后，我的数组为空。你知道我该如何解决这个问题？

我的路由模块是：

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

        { path: ':category', component: ProductListItemsComponent },
        { path: ':category/:id', component: SingleProductComponent }


    ]
},

]

您可以从github https://github.com/milos2611/angular-shop.git github

下载

Answer 1

您可以从两个组件创建一个get方法来访问数组。就像产品组件中一样，

get categoryModule(): Your_type[] {
   this.ProductsService.categoryModule;
}

在两个组件中都执行此操作，它将始终从产品服务获取值。

<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>
  {{categoryModule | json }}
</div>

使用参数在父级之前路由执行子级组件

1 个答案: