更新：整个故事

Question

我有一个标签式UI，使用这样一个非常简单的方法：

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

选择选项卡时，

在组件上将Active设置为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中删除组件以停止计时器时，获得通知的最佳方法是什么？

谢谢，

更新：整个故事

感谢Günter，我找到了问题的解决方案。由于我认为这是一个常见的要求，我将尝试将所有部分放在一起（不是完整的复制和粘贴准备好的代码，但是所有需要的部分）：

一个简单的标签组件，基于此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{}
}

示例组件如下所示：

样品component.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

组件的Angular2事件出现/消失

更新：整个故事

1 个答案: