在Angular 5中，当一个组件两次包含在另一个组件中时，如何防止该组件两次调用其订阅？

Question

在Angular 5中，当组件在另一个组件中包含两次时，如何防止该组件两次调用其订阅？ 例如，我有一个NavMenuComponent，在模板中，我有一个包含两次的购物车

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


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

而且，包含在NavMenuCartComponent中的ctor的订阅如下所示

    this.subscription = cartConnectorService.cartItemAdded$.subscribe(
  newCartItem => {
    console.log("in cartConnectorService.cartItemAdded$.subscribe");
    this.saveCartWithNewItem(newCartItem);
  });

saveCartWithNewItem最终调用CartService.saveCart（cart）

问题是saveCartWithNewItem函数被调用两次，而只需要被调用一次。 （下面的日志截图显示了它被调用了两次）

有人可能会问，为什么您的NavMenuCartComponent负责调用saveCartWithNewItem？为什么不将数据包含在例如CartService中，而只是在预订的NavMenuCartComponent中刷新数据呢？原因是此时CartService仅负责HTTP调用，而不负责存储数据。

此外，最初负责调用Observable的组件是ProductsGridComponent。使用连接器服务CartConnectorService。

从根本上说，我想发生的是，我想允许ProductsGridComponent允许向购物车中添加项目。并且，鉴于NavMenuComponent具有两个NavMenuCartComponent，我需要在其中以及在持久性层（通过服务）中更新数据。我的实现是使用CartConnectorService确保发生这种情况，但是现在我遇到了重复的发票问题。任何帮助表示赞赏。

Answer 1

您可以在@Input上创建一个NavMenuCartComponent，告诉它是否saveCartWithNewItem。

在NavMenuCartComponent中：

@Input callSaveCart: boolean;

//...

ngOnInit() {
    // ...

    if(callSaveCart) {
        this.subscription = cartConnectorService.cartItemAdded$.subscribe(newCartItem => {
            console.log("in cartConnectorService.cartItemAdded$.subscribe");
            this.saveCartWithNewItem(newCartItem);
        });
    }
}

然后，在您的HTML中，指定要保存的内容：

     <!-- cart 2 in nav scrolled -->
     <nav-menu-cart class="toolbar-item" [callSaveCart]="true" ngIf="auth.isAuthenticated()"></nav-menu-cart>

Answer 2

我能想到的简单解决方案：

{{ appGetData }}