取消订阅页面更改事件

Question

当我不断向导航堆栈添加页面时，会创建越来越多的 SimpleComponent 类实例。出于这个原因，我不止一次订阅“ev”事件并不止一次触发代码。

您可以通过在我的 plunker 示例中转到“那里”和“返回”并在不同情况下触发事件来检查这一点（检查控制台警告以获取结果）。您还可以看到，即使您回到导航堆栈的顶部，您仍然拥有订阅。

ionViewWillLeave 不工作可能是因为它不是我要离开的实际视图

我想知道我该怎么做才能避免这种情况？我希望像旧式 AngularJS 指令一样包含 SimpleComponent，因为我在我的应用程序中多次使用它。

这里是plunker

export class SimpleComponent {
  constructor(private ev: Events) {
    this.ev.subscribe('ev', e => {
      console.warn(e[0]);
    });  
  }
}


// home.ts template
    <simple-component></simple-component>
    <button (click)="go()">Go next page</button>
    <button (click)="raiseEv()">Raise Event</button>

Answer 1

你可以实施OnDestroy，你可以unsubscribe从ev：

import { OnDestroy } from '@angular/core';

export class SimpleComponent implements OnDestroy {

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

来自Angular 2 文档：

将清理逻辑放在 ngOnDestroy 中，该逻辑必须在 Angular 销毁指令之前运行。现在是通知应用程序的另一部分该组件即将消失的时候了。这是释放不会被自动垃圾收集的资源的地方。取消订阅 observables 和 DOM 事件。停止间隔计时器。取消注册此指令向全局或应用程序服务注册的所有回调。如果我们忽视这样做，我们就有可能发生内存泄漏。