Question

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

我在父方法中设置了两个父属性更改，期望孩子的绑定Input属性将会跟随。我发现当在父级中更改属性时，setter仅触发一次：

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

虽然对于这个它总是有效：

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

要修复我需要的第一个＆＃39;通知＆＃39;在输出中有一个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";

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

this.age++;

因此总是触发更改检测和访问器。

使用getter和setter

1 个答案: