清除销毁时的ViewChildren订阅

Question

我在Angular 8组件中有以下声明：

@ViewChildren(SelectComponent) selects: QueryList<SelectComponent>;

其中SelectComponent在*ngFor中声明了N次。

为了在有任何编辑时遍历selects数组，我订阅了这些更改：

this.selects.changes.subscribe(list => {
            list.forEach(item => {
                 alert('in forEach');
                // do something
            });
        });

循环运行良好，但问题是，当我关闭并重新打开主组件时，以前的selects显示不会被清除，因为警报显示了几次。

如何在组件关闭时清除/取消订阅这些订阅？

Answer 1

与在OnDestroy钩子中取消订阅清除任何其他订阅的方式相同：

private sub: Subscription;

this.sub = this.selects.changes.subscribe(list => {
        list.forEach(item => {
             alert('in forEach');
            // do something
        });
    });

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

Answer 2

在内存中，您可以将订阅存储在组件内的变量中

this.mySubscription = this.selects.changes.subscribe(list => {
            list.forEach(item => {
                 alert('in forEach');
                // do something
            });
        });

然后在组件生命周期的ngOnDestroy部分中取消订阅

public ngOnDestroy(): void {
    this.mySubscription.unsubscribe();
}

Answer 3

尝试将NgOnDestroy方法添加到您的component - https://angular.io/api/core/OnDestroy中，添加应该在重新加载时清除所有先前订阅的方法。