Question

在Angular 5中，您如何轻松地为同一组件类型的两个实例共享一个服务的单个实例？

例如，假设我有一个NavMenuComponent，其中包含NavMenuCartComponent的两个实例，如下所示，位于nav-menu.component.html

中

  <!-- Cart component instance 1-->
  <nav-menu-cart class="toolbar-item" *ngIf="auth.isAuthenticated()"></nav-menu-cart>


 <!-- Cart component instance 2-->
  <nav-menu-cart class="toolbar-item" *ngIf="auth.isAuthenticated()"></nav-menu-cart>

每个NavMenuCartComponent都包含一个购物车的实例，如下所示

  navMenuCart: ICart = {
buyerId: '',
items: []};

当我在一个实例中更新navMenuCart时，我希望另一个实例也获得该更新。这是通过共享服务完成的吗？本质上，我试图使每个实例（在本例中为NavMenuCartComponent的2个实例）内的状态保持同步。任何帮助表示赞赏。

Answer 1

我发现的简单解决方案是在服务中实际创建接口的实例，如下所示

{parents': <teamDrive_folderId>}

在该服务中创建一个函数以返回实例

    export class CartService  {
  cartUrl = environment.cartUrl;

  cart: ICart = {
    buyerId: '',
    items: []
  };

}

然后在任何一个组件内，将购物车的实例设置为服务的实例，如下所示

  getCart() {
return this.cart;

}

在Angular 5中，如何轻松地为同一组件类型的两个实例共享一个服务的单个实例？

1 个答案: