Angular2 Change Detection - 對象與字符串輸入屬性

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作為對象傳遞時，更改會反映到父/祖父母。

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 ）。

一個對象作為引用傳遞，因此你的祖父母，父，子（無論你傳遞它的地方）都有一個對同一個對象的引用，而一個字符串作為副本傳遞。
如果你傳遞一個字符串，那么每個人都會獲得一個與源無關的副本（除了它具有相同的值）。

您可能會爭辯說對象的屬性也是一個字符串。 如果修改了對象的字符串屬性，則將另一個字符串設置為value，但由於沒有任何內容直接引用字符串，而是通過對象引用，因此當它們訪問字符串屬性時，它們將獲得新值。