Angular 中 ngOnInit 和 constructor 使用场景详解
Angular 中的 ngOnInit 和 constructor 是两个经常被混淆的概念，对于初学者来说，弄清楚它们之间的区别非常重要。在本文中，我们将详细介绍 ngOnInit 和 constructor 的使用场景和区别。
一、constructor
constructor 是 ES6 中的构造函数，用于初始化类的实例。在 Angular 中，constructor 通常用于初始化组件的状态。例如：
```
class AppComponent {
public name: string;
constructor(name) {
console.log('Constructor initialization');
this.name = name;
}
}
let appCmp = new AppComponent('AppCmp');
console.log(appCmp.name);
```
在上面的例子中，constructor 用于初始化 AppComponent 的 name 属性。 constructor 是在类实例化时调用的，因此它可以用于初始化组件的状态。
二、ngOnInit
ngOnInit 是 Angular 中 OnInit 钩子的实现，用于初始化组件。ngOnInit 钩子是在 Angular 生命週期钩子中的一部分，钩子的调用顺序如下：
1. ngOnChanges -- 当被绑定的输入属性的值发生变化时调用，首次调用一定会发生在 ngOnInit() 之前。
2. ngOnInit() -- 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。在第一轮 ngOnChanges() 完成之后调用，只调用一次。
3. ngDoCheck -- 自定义的方法，用于检测和处理值的改变。
4. ngAfterContentInit -- 在组件内容初始化之后调用，只适用于组件。
5. ngAfterContentChecked -- 组件每次检查内容时调用，只适用于组件。
6. ngAfterViewInit -- 组件相应的视图初始化之后调用，只适用于组件。
7. ngAfterViewChecked -- 组件每次检查视图时调用，只适用于组件。
8. ngOnDestroy -- 当 Angular 每次销毁指令/组件之前调用并清扫。
ngOnInit 钩子通常用于初始化组件的状态，例如：
```
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>Welcome to Angular World</h1>
`,
})
export class AppComponent implements OnInit {
constructor() {
console.log('Constructor initialization');
}
ngOnInit() {
console.log('ngOnInit hook has been called');
}
}
```
在上面的例子中，ngOnInit 钩子用于初始化 AppComponent 的状态。可以看到，constructor 的执行是在 ngOnInit 钩子之前的。
三、constructor 和 ngOnInit 的区别
constructor 和 ngOnInit 的主要区别在于它们的执行时机。constructor 是在类实例化时调用的，而 ngOnInit 是在 Angular 生命周期钩子中的一部分，它是在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后调用。
在 constructor 中，我们不能获取输入属性的值，因为输入属性的值是在 ngOnChanges 钩子中设置的，而 ngOnChanges 钩子是在 ngOnInit 钩子之前调用的。因此，在 constructor 中，我们只能初始化组件的状态，而不能获取输入属性的值。
constructor 和 ngOnInit 都用于初始化组件的状态，但它们的执行时机和作用域不同。constructor 用于初始化组件的状态，而 ngOnInit 钩子用于初始化组件的状态，并且可以获取输入属性的值。
