使用getter和setter拦截@Input的变化

Question

我尝试使用@ Input属性的Typescript访问器来拦截从父级到子级的更改。 我从文档中改变了一些这个例子。

我在父方法中设置了两个父属性更改，期望子项的绑定Input属性将遵循。 我发现当在父项中更改属性时， setter只触发一次：

  this.name="John"; //but this.name = this.name + "r" will work

而对于这一个，它始终有效：

  this.age++; // or  this.age = this.age + 1;

要解决第一个问题，我需要在输出中使用EventEmitter“通知”父级（我已经尝试了，它可以工作），但是为什么第二个不需要呢？ 有人可以解释两者之间的真正差异，以及为什么它不适用于第一个（或者为什么它适用于第二个）。

DEMO

---

家长班： ......

  name = 'Jane';
  age = 10;

  changeName(){
    this.name= "John";
  }

  changeAge(){
    this.age++;
  }

家长观点：

<my-name [name]="name"></my-name>
<button (click)="changeName()">Click me to change the name</button>

<my-age [age]="age"></my-age>
<button (click)="changeAge()">Click me to change the age</button>

Child1班级：

 private _name = '';

  @Input()
  set name(name: string) {
    this._name = (name && name.trim()) || '<no name set>';
    console.log(name);
  }

  get name(): string { return this._name; }

Child1查看：

  My name is {{name}}.

Child2类： private _age = 0;

 @Input()
  set age(age: number) {
    this._age = age || 0;
    console.log(age);
  }

  get age(): number { return this._age; }

Child2视图

  I am {{age}} years old

Answer 1

经过一些研究和反思，我发现/记得只有在有变化检测时才会更新绑定。 因此，如果name属性设置如下：

this.name= "John";

第一次运行会更改属性的初始值，因此会触发访问者。 对于第二次和其他时间，相同的语句将不会触发更改检测，因为值没有更改（它已经是“John”），因此访问器将不会触发。
对于age属性而言，它随着价值的增加而变化：

this.age++;

所以变更检测和访问器总是被触发。