Question

我了解到当其父组件的组件具有@Input属性时会触发ngOnChanges。但是，如何检测@Input属性是否在其组件内更改。我还没有找到一个好的答案。谢谢

Answer 1

为此，您可以使用 ngOnChanges() 生命周期方法，如较早的答案中所述：

@Input() yourInput: string;

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

Answer 2

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

以下是一个演示此内容的示例组件：

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（）或事件发射器。

检测到@Input属性angular 4的内部更改

3 个答案: