Angular ngOnChanges没有被调用|极客教程

Angular ngOnChanges没有被调用

在Angular中，ngOnChanges是一个生命周期钩子方法，用于监视组件输入属性的变化。当组件的输入属性发生变化时，ngOnChanges会被调用。然而，有时候我们发现ngOnChanges并未被调用，导致我们无法及时处理输入属性的变化。本文将详细探讨造成ngOnChanges未被调用的可能原因，并提供解决方法。

ngDoCheck方法的存在

在解决ngOnChanges未被调用的问题时，我们首先需要考虑到ngDoCheck方法的存在。ngDoCheck是另一个生命周期钩子方法，在每个变更检测周期中被调用。如果在ngDoCheck方法中手动对输入属性进行了比较或处理，那么ngOnChanges可能会因为没有检测到输入属性的变化而未被调用。

要解决这个问题，我们需要在ngDoCheck方法中正确地对输入属性做出比较，并在需要时手动触发ngOnChanges方法。以下是一个示例代码：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: '<div>{{text}}</div>'
})
export class MyComponent implements OnChanges {

  @Input() inputText: string;
  text: string;

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.inputText) {
      this.text = changes.inputText.currentValue;
    }
  }

  ngDoCheck(): void {
    if (this.inputText !== this.text) {
      this.text = this.inputText;
      this.ngOnChanges({ inputText: new SimpleChange(this.text, this.text, false) });
    }
  }
}

在上面的示例中，我们在ngDoCheck方法中手动对输入属性inputText进行了比较，并在需要时调用ngOnChanges方法。这样就可以确保ngOnChanges能够及时地处理输入属性的变化。

使用ChangeDetectionStrategy.OnPush策略

另一个可能导致ngOnChanges未被调用的原因是组件的变更检测策略设置为OnPush。在使用OnPush策略时，Angular会将组件标记为“脏”并重新渲染，只有在组件的输入属性发生变化时才会调用ngOnChanges方法。

如果你的组件使用了OnPush策略，并且希望在输入属性没有变化的情况下也调用ngOnChanges方法，可以在ngDoCheck方法中手动触发ngOnChanges。以下是相应的示例代码：

import { Component, Input, OnChanges, SimpleChanges, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: '<div>{{text}}</div>',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent implements OnChanges {

  @Input() inputText: string;
  text: string;

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.inputText) {
      this.text = changes.inputText.currentValue;
    }
  }

  ngDoCheck(): void {
    if (this.inputText !== this.text) {
      this.text = this.inputText;
      this.ngOnChanges({ inputText: new SimpleChange(this.text, this.text, false) });
    }
  }
}

通过以上方式，我们可以在使用OnPush策略的情况下，仍然保证ngOnChanges方法能够被正确调用。