constructor 与 ngOnInit

Constructor 与 ngOnInit

在 Angular 中，constructor 和 ngOnInit 是两个常用的生命周期钩子函数。它们分别用于组件的初始化和数据绑定阶段。

Constructor

constructor 是 TypeScript 中的一个类构造函数，用于创建类的实例并初始化类的成员变量。在 Angular 组件中，constructor 主要用于依赖注入和初始化一些属性。

示例代码：

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

@Component({
  selector: 'app-example',
  template: '<h1>Hello, Angular!</h1>'
})
export class ExampleComponent {
  constructor() {
    console.log('Constructor called');
  }
}

ngOnInit

ngOnInit 是 Angular 提供的一个生命周期钩子函数，在组件初始化完成后被调用。在 ngOnInit 中通常进行一些初始化操作，比如获取远程数据、订阅事件等。

示例代码：

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

@Component({
  selector: 'app-example',
  template: '<h1>Hello, Angular!</h1>'
})
export class ExampleComponent implements OnInit {
  constructor() {
    console.log('Constructor called');
  }

  ngOnInit() {
    console.log('ngOnInit called');
  }
}

区别

• constructor 是 TypeScript 中的类构造函数，用于创建实例和初始化属性；
• ngOnInit 是 Angular 提供的生命周期钩子函数，用于组件初始化完成后进行一些操作。

在实际开发中，我们通常将依赖注入和属性初始化放在 constructor 中，将组件的初始化操作放在 ngOnInit 中。