为组件Angular2事件出现/消失

Question

我用一个非常简单的方法，这样的选项卡式UI：

<div *ngIf="active" class="pane"> 
    <ng-content></ng-content> 
</div> 

主动当标签被选中时设置为true的组件。

里有标签的多个组件，从web服务的所有民意调查数据，相关代码：

export class DebugComponent implements OnInit { 
    public timerSubscription: Subscription; 

    ngOnInit() { 
    this.startTimer(0); 
    } 

    private startTimer(delay: number){ 
    let timer = Observable.timer(delay, 1000); 
    this.timerSubscription = timer.subscribe(x => this.execute()); 
    } 

    private stopTimer(){ 
    this.timerSubscription.unsubscribe(); 
    } 

    execute() { 
    this.stopTimer(); 
    // do stuff 
    this.startTimer(5); 
    } 
} 

虽然它运作良好，开始使用ngOnInit计时，我发现没有办法阻止它的时候该组件将从可见DOM中移除。

当ngIf条件中的组件从可见DOM中被移除以停止定时器时，通知最佳方法是什么？

感谢，

UPDATE：整个故事

感谢冈特，我想出解决问题的办法。因为我认为这是一个常见的要求，所以我会尝试把所有的部分放在一起（不是完整的复制和粘贴现成的代码，而是所有需要的部分）：

一个简单的选项卡组件，基于此http://blog.thoughtram.io/angular/2015/04/09/developing-a-tabs-component-in-angular-2.html ：

主要翼片组件包含选项卡：

凸片-component.ts

import {Component, ContentChildren, QueryList, AfterContentInit} from '@angular/core'; 
import {TabComponent} from './tab.component'; 

@Component({ 
    selector: 'tabs', 
    template: ` 
    <ul class="nav nav-tabs"> 
     <li *ngFor="let tab of tabs" (mouseup)="selectTab(tab)" [class.active]="tab.active"> 
     <a href="#">{{tab.title}}</a> 
     </li> 
    </ul> 
    <ng-content></ng-content> 
    ` 
}) 
export class TabsComponent implements AfterContentInit { 

    @ContentChildren(TabComponent) tabs: QueryList<TabComponent>; 

    // contentChildren are set 
    ngAfterContentInit() { 
    // get all active tabs 
    let activeTabs = this.tabs.filter((tab) => tab.active); 

    // if there is no active tab set, activate the first 
    if (activeTabs.length === 0) { 
     this.selectTab(this.tabs.first); 
    } 
    } 

    selectTab(selectedTab: TabComponent) { 
    // deactivate active tab 
    this.tabs.filter((tab) => tab.active).forEach(tab => tab.disable()); 

    // activate the tab the user has clicked on. 
    selectedTab.activate(); 
    } 

} 

的选项卡组件把凸片部件内部：

制表component.ts

import {Component, Input, ContentChildren, QueryList} from '@angular/core'; 
import {TabChild} from "./tab.child"; 

@Component({ 
    selector: 'tab', 
    styles: [` 
    .pane{ 
     padding: 1em; 
    } 
    `], 
    template: ` 
    <div *ngIf="active" class="pane"> 
     <ng-content></ng-content> 
    </div> 
    ` 
}) 
export class TabComponent { 
    @Input('tabTitle') title: string; 
    @Input() active = false; 

    @ContentChildren(TabChild) content:QueryList<TabChild>; 

    public activate(){ 
    this.active = true; 
    this.content.toArray().forEach(dc => dc.tabActivated()); 
    } 

    public disable(){ 
    this.active = false; 
    this.content.toArray().forEach(dc => dc.tabDisabled()); 
    } 
} 

显示内的卡口需要从该基类继承的组件：

制表child.ts

import {Directive} from "@angular/core"; 

@Directive({selector: "TabChild"}) 
export class TabChild { 
    public tabActivated() : void{} 
    public tabDisabled() : void{} 
} 

示例组件如下所示：

样本组件。TS

import {Component, ApplicationRef, forwardRef} from '@angular/core'; 
import {TabChild} from "./tab.child"; 

@Component({ 
    selector: 'sample', 
    templateUrl: "app/sample.component.html", 
    providers: [{provide: TabChild, useExisting: forwardRef(() => SampleComponent) }] 
}) 
export class SampleComponent implements TabChild { 

    tabActivated(): void { 
    console.log("Sample tabActivated"); 
    } 

    tabDisabled(): void { 
    console.log("Sample tabDisabled"); 
    } 
} 

全部放在一起：

@Component({ 
    selector: "my-app", 
    template: `<tabs> 
    <tab tabTitle="Sample1"> 
     <sample></sample> 
    </tab> 
    <tab tabTitle="Sample2"> 
     <sample></sample> 
    </tab> 
    </tabs>` 
}) 

Answer 1

可以使用ngOnDestroy生命周期回调

export class DebugComponent implements OnInit, OnDestroy { 

    ngOnDestroy() { 
    this.stopTimer(); 
    } 

参见https://angular.io/docs/ts/latest/api/core/index/OnDestroy-class.html