如何在 Angular2 中为被移除的组件捕获 onDestroy

Question

我有一个在加载数据时添加为占位符的组件。加载数据后，它会用实际数据覆盖此组件。不幸的是，这个组件的 ngOnDestroy() 方法永远不会被调用，所以它只是在后台不断地运行并且永远不会被删除。我怎样才能确保在它被移除时我能抓住它，并妥善处理它？代码如下：

template.html

    <div class="row status">
      <div class="small-6 columns indent">SOME DATA</div>
      <div id='data_id' class="small-6 columns">

        <!-- This is the component that will be removed and replaced -->
        <app-loading-dots></app-loading-dots>

      </div>
    </div>

component_remover.ts

update_view(new_data, selector): void {
  var text_element = d3.select(selector);
  this.tween_it(text_element, new_data, 5000);
}

loading-dots.ts

export class LoadingDotsComponent implements OnInit, OnDestroy {

  /* Other code... */

  constructor() {}


  ngOnDestroy() {
    console.log("Destroyed");
    clearInterval(this.interval);
  }

  /* ... */

}

基本上，component_remover 获取新数据，这是一个数字，并将其从 0 补间到新数字，并将新文本写入 text_element。这会覆盖我模板中的 app_loading_dots 组件，但我没有捕捉到 ngOnDestroy 调用。任何想法我可以如何正确处理？

Answer 1

如果我理解正确，您的组件不会被 Angular 删除。 这意味着 angular 不知道组件已被销毁并且不会触发 ngOnDestroy。 如果要删除组件，请使用 ngIf 之类的方法或动态添加组件，以便您可以控制何时要删除它。