Angular2 Change Detection – 对象与字符串输入属性

发布时间：2020-12-17 17:25:55 所属栏目：安全来源：网络整理

导读：我想通过从HeroDetailComponent调用一个孙子组件power-select来扩展[Angular2的教程] [1]中的应用程序： selector: 'my-hero-detail',template: ` div *ngIf="hero" h2{{hero.name}} details!/h2 divlabelid: /label{{hero.id}}/div div labelname: /label i

我想通过从HeroDetailComponent调用一个孙子组件power-select来扩展[Angular2的教程] [1]中的应用程序：

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']

当我将hero.power作为对象传递时,更改会反映到父/祖父母.

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

但是,如果我尝试将hero.power作为字符串传递,则除非我使用@Ouput eventemitter,否则不会反映更改.

http://plnkr.co/edit/p9YcfGudIgSbGPp1xrlw?p=preview(提供者：zoechi)

问题是,为什么我在传递字符串时需要@Output eventemitter而不是在传递对象时？

解决方法

区别在于对象属性是可变的而字符串不是(像所有其他基本类型boolean,number,symbol,null和undefined https://developer.mozilla.org/de/docs/Web/JavaScript/Datenstrukturen).

对象作为引用传递,因此您的祖父母,父,子(无论您传递它)都具有对同一对象的引用,而字符串作为副本传递.
如果你传递一个字符串,那么每个人都会获得一个与源无关的副本(除了它具有相同的值).

您可能会争辩说对象的属性也是一个字符串.如果修改了对象的stirng属性,则将不同的字符串设置为value,但由于没有直接引用字符串而是通过对象引用,因此当它们访问字符串属性时,它们将获得新值.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!