Angular ngOnInit() 和 ngOnChanges() 有什么区别

typescript

Angular中的ngOnInit()和ngOnChanges()是两个常用的生命周期钩子函数，用于在组件初始化和数据变化时对组件进行操作。它们之间存在一些区别，下面将详细介绍它们的作用和用法。

ngOnInit()的作用和用法

ngOnInit()是Angular组件生命周期中的一个钩子函数，它会在组件初始化完成后被调用。通常情况下，我们会在ngOnInit()函数中进行组件的初始化工作，例如获取初始数据、订阅观察者等。

下面是一个简单的例子，演示了如何使用ngOnInit()函数初始化组件：

typescript
import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-example',
  template: <code>
    <h1>{{ data }}</h1>
  </code>
})
export class ExampleComponent implements OnInit {
  data: string;
  ngOnInit() {
    this.data = 'Hello, World!';
  }
}

在上面的代码中，ExampleComponent组件实现了OnInit接口，并在ngOnInit()函数中给data属性赋值。当组件初始化完成后，模板中的{{ data }}会被替换为'Hello, World!'，从而显示在页面上。

ngOnChanges()的作用和用法

ngOnChanges()也是一个Angular组件生命周期中的钩子函数，它会在组件的输入属性发生变化时被调用。通过ngOnChanges()函数，我们可以捕获输入属性的变化，并根据变化进行相应的处理。

下面是一个例子，展示了如何使用ngOnChanges()函数监听输入属性的变化：

typescript
import { Component, OnChanges, Input } from '@angular/core';
@Component({
  selector: 'app-example',
  template: <code>
    <h1>{{ data }}</h1>
  </code>
})
export class ExampleComponent implements OnChanges {
  @Input() input: string;
  data: string;
  ngOnChanges() {
    if (this.input) {
      this.data = 'Input changed: ' + this.input;
    }
  }
}

在上面的代码中，ExampleComponent组件实现了OnChanges接口，并在ngOnChanges()函数中判断输入属性input的变化。当输入属性发生变化时，data属性会被更新为'Input changed: ' + this.input，并在模板中显示。

在Angular中，ngOnInit()和ngOnChanges()是两个常用的生命周期钩子函数。ngOnInit()用于在组件初始化完成后进行一次性的初始化操作，而ngOnChanges()则用于监听输入属性的变化并进行相应的处理。它们的使用方法和作用有所不同，但都是非常重要的组件生命周期钩子函数。

希望本文对你理解和应用ngOnInit()和ngOnChanges()有所帮助！