ngOnInit 何时被调用？

推荐答案

ngOnInit 是 Angular 生命周期钩子之一，它在 Angular 完成组件的初始化后立即被调用。具体来说，ngOnInit 在以下情况下被调用：

1. 组件初始化完成：当 Angular 完成组件的初始化（即完成数据绑定和输入属性的设置）后，ngOnInit 会被调用。
2. 首次调用：ngOnInit 在组件的生命周期中只会被调用一次，通常用于执行一些初始化逻辑，比如从服务器获取数据或设置默认值。

本题详细解读

1. ngOnInit 的调用时机

ngOnInit 是 Angular 生命周期钩子之一，属于 OnInit 接口的一部分。它会在 Angular 完成组件的初始化后立即被调用。具体来说，ngOnInit 的调用时机是在以下两个阶段之后：

• 构造函数调用完成：组件的构造函数会在 ngOnInit 之前被调用。构造函数通常用于依赖注入和简单的初始化操作。
• 输入属性绑定完成：如果组件有输入属性（@Input），Angular 会在 ngOnInit 被调用之前完成这些输入属性的绑定。

2. ngOnInit 的使用场景

ngOnInit 通常用于执行一些需要在组件初始化完成后立即执行的逻辑，例如：

• 数据获取：从服务器获取数据并在组件中显示。
• 初始化逻辑：设置组件的默认值或初始化一些状态。
• 订阅事件：订阅某些事件或 Observable，以便在组件生命周期内处理这些事件。

3. ngOnInit 与 constructor 的区别

• constructor：用于依赖注入和简单的初始化操作。它会在组件实例化时立即被调用，此时组件的输入属性还未被绑定。
• ngOnInit：用于执行需要在组件初始化完成后执行的逻辑。它会在组件的输入属性绑定完成后被调用。

4. 示例代码

// www.javascriptcn.com code example
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `<p>{{ message }}</p>`
})
export class ExampleComponent implements OnInit {
  message: string;

  constructor() {
    // 构造函数中可以进行简单的初始化操作
    this.message = 'Initializing...';
  }

  ngOnInit() {
    // ngOnInit 中执行初始化逻辑
    this.message = 'Component initialized!';
  }
}

在这个示例中，ngOnInit 会在组件初始化完成后被调用，并将 message 的值更新为 'Component initialized!'。

5. 总结

ngOnInit 是 Angular 组件生命周期中的一个重要钩子，它在组件初始化完成后被调用，通常用于执行一些初始化逻辑。理解 ngOnInit 的调用时机和使用场景对于编写高效的 Angular 应用程序至关重要。