代码之家 › 专栏 › 技术社区 › Judy007

在Angular5中,当组件包含在另一个组件中两次时,如何防止组件调用其订阅两次?

typescript angular

-2

Judy007 · 技术社区 · 6 年前

在Angular5中,当组件包含在另一个组件中两次时,如何防止组件调用其订阅两次? 例如,我有一个NavMenuComponent,在模板中,我有一个包含两次的cart

        <!-- 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调用,而不负责存储数据。

另外,最初负责调用observate的组件是ProductsGridComponent。它使用连接器服务CartConnectorService。

基本上,我希望发生的是,我希望允许ProductsGridComponent允许向购物车添加项目。而且,考虑到NavMenuComponent有两个NavMenuCartComponent,我需要在这些组件以及持久层(通过服务)中更新数据。我的实现是使用CartConnectorService来确保发生这种情况,但现在我遇到了这个重复调用问题。如有任何帮助,我们将不胜感激。

2 回复 | 直到 6 年前

user184994 6 年前

您可以创建 @Input 上 NavMenuCartComponent ,它告诉它是否 saveCartWithNewItem .

在 导航菜单组件 :

@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>

Venkat 6 年前

我能想到的简单解决方案是:

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