Question

我有一个＆＃34; appService＆＃34;我用它来处理我所有组件（表单，导航等）之间的交互。

我的服务有许多组件订阅的事件发射器（显示结果，选择元素，发布表单等）。

当显示新视图时，它会订阅所需的appService事件。现在问题是当我导航到另一个视图（窗体）时，不再需要的视图被销毁，但它的订阅仍然被调用...！我发现引用所有订阅并明确取消订阅一个简单任务的大量样板。我究竟做错了什么？如何siplify这个？

示例代码：

export class VendorsForm {
    constructor(private appService: AppServiceMain)
    {
            this.appService.onSearchResultSelected$.subscribe((selectedEntity) => {
            //detailed view of this item
            this.model = selectedEntity;
            this.appService.setFormIsShowingDetail();
        })
    });

    }
}

现在在另一个组成部分：

export class CustomersForm {
    constructor(private appService: AppServiceMain)
    {
            this.appService.onSearchResultSelected$.subscribe((selectedEntity) => {
            //detailed view of this item
            this.model = selectedEntity; this.appService.setFormIsShowingDetail();
        })
    });

    }
}

作为参考，这里是服务和事件调用组件：

export class AppServiceMain {
    public onSearchResultSelected$: EventEmitter<IEntity>;
        setSelectedEntity(ent: IEntity)
        {
            this.formstate = states.EntitySelected;
            this.onSearchResultSelected$.emit(ent);
        }

事件调用组件

export class ResultsComponent { 
    rowDblClick(ev$)
    {
        this.appService.setSelectedEntity(ev$.data);
    }

如果我愿意，我明白如何删除这些嫌疑人。问题是我的表单非常大而且功能齐全，而且我有大量的非标准引用，Isnt有没有办法在视图被破坏时自动停止监听？我发现手动破坏所有这些都非常容易出错。

Answer 1

您不需要拥有大量订阅。使用RxJS.Subject和takeUntil组合来处理像老板这样的订阅：

http://example.com/api/v1.0/productgroups

Answer 2

如果你强制订阅，那么也必须取消订阅

 this.someSubscription = this.appService.onSearchResultSelected$.subscribe((selectedEntity) =>

ngOnDestroy() {
  this.someSubscription.unsubscribe();
}

另见how to unsubscribe several subscriber in angular 2

Answer 3

我这样做的方式是：

this.subscriptions.push( this.appService.onSearchResultSelected$.subscribe((selectedEntity) => {}));

ngOnDestroy() {
  this.subscriptions.forEach((subscription) => {
        subscription.unsubscribe();
    });
}

您可以使用这种方式处理n个订阅，每次使用订阅时都需要推送。

这是最简单，最简单的方法。

angular2销毁视图上的订阅销毁

3 个答案: