Angular2 Change Detection - object vs string input properties

I wanted to extend the application from [Angular2 Tutorial] [1], having the grandson component, power-select , is called from HeroDetailComponent:

  selector: 'my-hero-detail',
  template: `
    <div *ngIf="hero">
      <h2>{{hero.name}} details!</h2>
      <div><label>id: </label>{{hero.id}}</div>
      <div> 
        <label>name: </label>
        <input [(ngModel)]="hero.name" placeholder="name"/>
        <power-select [(power)]="hero.power"></power-select>
      </div>
    </div>
  `,
  directives: [PowerSelectComponent],
  inputs: ['hero']

When I pass to hero.power as an object, the changes are reflected in the parent / grandfather.

http://plnkr.co/edit/UfMStWU5fEywvovpSIg1?p=preview

However, if I try to pass hero.power as a string, the changes will not be reflected unless I use the eventemitter @Ouput.

http://plnkr.co/edit/p9YcfGudIgSbGPp1xrlw?p=preview (provided by: zoechi)

The question is, why do I need @Output eventemitter when passing a string, and not when passing an object?

+4
source share
1 answer

, , - ( : , , , https://developer.mozilla.org/de/docs/Web/JavaScript/Datenstrukturen).

, , , ( ) , .
, , ( , ).

, . , , , , .

+5

Source: https://habr.com/ru/post/1628728/


All Articles