Angular2 变化检测 - 对象与字符串输入属性

Question

我想通过从 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 作为对象传入时，更改会反射(reflect)到父/祖 parent 。

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

但是，如果我尝试将 hero.power 作为字符串传递，除非我使用 @Ouput 事件发射器，否则更改不会得到反射(reflect)。

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

问题是，为什么我在传递字符串而不是传递对象时需要@Output 事件发射器？

Answer 1

不同之处在于对象属性是可变的，而字符串不是(与所有其他基本类型 boolean、number、symbol、null 和 undefined https://developer.mozilla.org/de/docs/Web/JavaScript/Datenstrukturen 一样)。

一个对象作为引用传递，因此您的祖 parent 、 parent 、 child (无论您将其传递到哪里)都有对同一对象的引用，而字符串作为副本传递。
如果你传递一个字符串，每个人都会得到一个与源完全无关的副本(除了它具有相同的值)。

您可能会争辩说对象的属性也是一个字符串。如果对象的字符串属性被修改，一个不同的字符串被设置为值，但是因为没有直接引用字符串而是通过对象引用，当他们访问字符串属性时，他们得到新的值。