Question

我想通过从HeroDetailComponent调用一个孙子组件 power-select 来扩展[Angular2＆＃39教程] [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而不是在传递对象时？

Answer 1

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

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

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

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

1 个答案: