angular - 检测 @Input 属性角度 4 的内部变化

Question

我知道 ngOnChanges 是在其父组件的组件 @Input 属性时触发的。但是我如何检测 @Input 属性是否在其组件中发生更改。我一直无法找到一个好的答案。谢谢

Answer 1

为此，您可以使用ngOnChanges()旧答案中也提到的生命周期方法：

@Input() yourInput: string;

ngOnChanges(changes: SimpleChanges) {
    this.doSomething(changes.yourInput.currentValue);
    // You can also use yourInput.previousValue and 
}

Answer 2

您可以定义@Input()setter 方法，以便在为属性设置新值时执行其他操作。

这是一个示例组件，演示了这一点：

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

@Component({
  selector: 'hello',
  template: `<h1 (click)="name = 'Bye'">{{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {

  private _name: string;

  get name() {
    console.log("Returning name", this._name);
    return this._name;
  }

  @Input() 
  set name(newName) {
    console.log("Setting new name", newName);
    this._name = newName;
  }
}

当在另一个组件中使用该组件时，可以像下面这样指定：

  <hello  [name]="'Hi'"></hello>  

在上面的示例中，初始值Hi是从外部/父组件设置的，并且在单击文本时，值会更新为Bye组件内部。在这两种情况下，您都会在浏览器控制台中观察到console.log语句。

Answer 3

您可以使用需要被父组件捕获的 Output() 或事件发射器。