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

Question

I tried to use Typescript accessors for @ Input property to intercept changes from the parent to the child. I changed a little bit this example from the docs .

I set two parent properties change in parent's methods expecting that child's binded Input properties will follow. I found that when the property is changed in the parent as the following, the setter fires only once:

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

while for this one it works always:

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

To fix the first one I need to 'notify' the parent with an EventEmitter in an Output (which I already tried, and it works), but why the second one doesn't need it? Could someone explain the real differences between the two and why it doesn't work for the first one (or why it works for the second one).

DEMO

---

Parent class: ...

  name = 'Jane';
  age = 10;

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

  changeAge(){
    this.age++;
  }

Parent view:

<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 Class:

 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 view:

  My name is {{name}}.

Child2 class: private _age = 0;

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

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

Child2 view

  I am {{age}} years old

Answer 1

After some research and reflexion, I found/remembered that bindings are only updated when there is a change detection. So in case name property is set as following:

this.name= "John";

the first run changes the initial value of the property, so the accessor is fired. For the second and other times, the same statement will not trigger the change detection as the value didn't change (it was already "John") and consequently the accessor will not fire.
While for the age property, it's always a value change as it increments:

this.age++;

so the change detection and accessor are always fired.