Difference between Constructor and ngOnInit

技术背景

在Angular开发中，constructor和ngOnInit是两个常用的概念，它们在组件的生命周期中扮演着不同的角色。constructor是类的默认方法，在类实例化时执行；而ngOnInit是Angular提供的生命周期钩子，用于表示Angular完成组件创建。了解它们之间的区别，有助于我们更好地组织代码，提高开发效率。

实现步骤

1. 引入OnInit接口

要使用ngOnInit，需要从@angular/core中引入OnInit接口。

import { Component, OnInit } from '@angular/core';

2. 实现OnInit接口

在组件类中实现OnInit接口，并实现ngOnInit方法。

export class App implements OnInit {
  constructor() {
    // 构造函数，在ngOnInit之前调用
  }

  ngOnInit() {
    // 在构造函数和第一次ngOnChanges之后调用
  }
}

核心代码

示例代码1：简单组件示例

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'my-app',
  template: `<h1>App is running!</h1>
             <my-app-main [data]=data></my-app-main>`,
  styles: ['h1 { font-weight: normal; }']
})
class ExampleComponent implements OnInit {
  constructor(private router: Router) {} // 构造函数中进行依赖注入

  // ngOnInit，在组件初始化后调用
  ngOnInit() {
    console.log('Component initialised!');
  }
}

示例代码2：获取服务器数据示例

export class Users implements OnInit {
  user_list: Array<any>;

  constructor(private _userService: UserService) {}

  ngOnInit() {
    this.getUsers();
  }

  getUsers() {
    this._userService.getUsersFromService().subscribe(users => this.user_list = users);
  }
}

最佳实践

构造函数（Constructor）

• 依赖注入：主要用于依赖注入，例如注入服务。

constructor(private userService: UserService) {
  // 依赖注入
}

• 避免复杂逻辑：构造函数应仅用于初始化类成员，避免进行实际的“工作”。

ngOnInit方法

• 初始化逻辑：适合进行初始化逻辑，如从API获取数据、访问@Input()值、订阅可观察对象等。

ngOnInit(): void {
  // 初始化逻辑
  console.log(this.myInput); // @Input() 现在可用
}

• 避免在构造函数中进行初始化：尽量将初始化逻辑放在ngOnInit中，因为此时组件的绑定已经解析。

常见问题

1. @Input值在构造函数中不可用

@Input值在构造函数中不可用，因为构造函数在Angular设置组件的@Input()属性之前执行。@Input属性在ngOnInit中可用。

2. 构造函数中进行复杂逻辑的问题

在构造函数中进行复杂逻辑会使代码难以扩展、阅读和测试。应将初始化逻辑分离到ngOnInit或其他方法中。

3. 异步初始化问题

在构造函数中进行异步初始化可能会导致竞态条件，因为类实例化在异步操作完成之前就已完成。建议在ngOnInit或其他生命周期钩子中进行异步初始化。