ngOnDestroy 何时被调用？

推荐答案

ngOnDestroy 是 Angular 生命周期钩子之一，当一个 Angular 组件或指令被销毁时，ngOnDestroy 会被调用。具体来说，ngOnDestroy 在以下情况下被调用：

1. 组件或指令从 DOM 中移除：当组件或指令从 DOM 中移除时，Angular 会调用 ngOnDestroy 钩子。
2. 路由导航导致组件被销毁：当用户导航到另一个路由时，当前路由的组件会被销毁，此时 ngOnDestroy 会被调用。
3. 手动销毁组件：如果通过编程方式（例如使用 ViewContainerRef 的 clear() 方法）销毁组件，ngOnDestroy 也会被调用。

本题详细解读

1. ngOnDestroy 的作用

ngOnDestroy 主要用于执行清理操作，例如取消订阅 Observable、释放资源、清除定时器等。这样可以避免内存泄漏和其他潜在问题。

2. 调用时机

• 组件销毁：当组件从 DOM 中移除时，Angular 会自动调用 ngOnDestroy。这通常发生在路由导航或组件被动态移除时。
• 指令销毁：对于指令，当指令所在的元素从 DOM 中移除时，ngOnDestroy 也会被调用。
• 手动销毁：在某些情况下，开发者可能需要手动销毁组件或指令，此时 ngOnDestroy 也会被触发。

3. 示例代码

-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------ - ------------ - ---- -------

------------
  --------- --------------
  --------- ----------- --------------
--
------ ----- ---------------- ---------- --------- -
  ------- ------------- -------------

  ------------- -
    ----------------- - ----------------------------- -- -
      -- ----
    ---
  -

  ------------- -
    -- -----------
    --------------------------------
  -
-

4. 注意事项

• 避免内存泄漏：在 ngOnDestroy 中清理所有订阅和资源是非常重要的，否则可能会导致内存泄漏。
• 不要依赖 DOM 元素：在 ngOnDestroy 中，DOM 元素已经被移除，因此不应再尝试访问或操作 DOM 元素。

通过理解 ngOnDestroy 的调用时机和作用，开发者可以更好地管理组件的生命周期，确保应用程序的性能和稳定性。