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

Posted 2023-02-23

【中文标题】如何在 Angular2 中为被移除的组件捕获 onDestroy

【英文标题】：How to catch onDestroy in Angular2 for component that is removed

【发布时间】：2017-02-07 02:04:39

【问题描述】：

我有一个在加载数据时添加为占位符的组件。加载数据后，它会用实际数据覆盖此组件。不幸的是，这个组件的 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 调用。任何想法我可以如何正确处理？

【问题讨论】：

除了@GuilhermeMeireles 的建议之外，您也许可以在覆盖数据之前自己调用 OnDestroy 函数。请参阅***.com/questions/34093670/… 了解如何进行

感谢您的评论！我想我会使用 *ngIf

【参考方案1】：

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

【讨论】：

在我的组件中创建一个布尔值来跟踪我何时需要显示该组件，并使用 *ngIf 指令来显示它就可以了。谢谢