Angular 2無狀態或有狀態？

Question

所以這是我的問題。我在這裏有這個組件編輯通過輸入傳遞的聯繫人。當我改變輸入文本中的某些內容（雙向數據綁定），然後在點擊保存並路由到另一個組件（顯示所有聯繫人列表）時，此代碼可以工作並更改聯繫人蔘數。

import {Component} from 'angular2/core'; 
import {Contact} from "./contact"; 
import {Router} from "angular2/src/router/router"; 
import {OnInit} from "angular2/src/core/linker/interfaces"; 
import {ContactService} from "./contacts.service"; 

@Component({ 
    selector:'editor', 
    template:` 
    <div class='editor'> 
     <label>Edit name : </label><input type="text" [(ngModel)]="contact.name"> 
     <br> 
     <label>Edit email : </label><input type="text" [(ngModel)]="contact.email"> 
     <br> 
     <label>Edit phone number: </label><input type="text" [(ngModel)]="contact.phone"> 
     <br> 
     <div class="description"> 
     Description: 
     <br> 
     <textarea rows="4" cols="50" [(ngModel)]="contact.description"></textarea> 
     </div> 
     <br> 
     <input type="button" (click)="onCreateContact()" class="button" value="Save Changes"/> 
    </div> 
`, 
    inputs:["contact"], 
    styles:[ 
     ` 
     label { 
      display: inline-block; 
      width: 145px; 
      border-left: 3px solid #006ec3; 
      padding-left: 8px; 
      padding-bottom: 8px; 
     } 
     .description{ 

      border-left: 3px solid #006ec3; 
      padding-left: 8px; 
      padding-bottom: 8px; 
     } 
     ` 
    ] 
}) 

export class ContactEditorComponent implements OnInit{ 

    public contact:Contact; 

    constructor(private router:Router){ 

    } 

    onCreateContact(){ 
     this.router.navigate(['Contacts']); 
    } 

} 

現在，如果我加入了temp:Contact變量，它把我接觸的克隆，改變臨時變量然後將其克隆到聯繫對象這種方式改變我的課上，變化不再被保存時，我打的按鈕。

@Component({ 
    selector:'editor', 
    template:` 
    <div class='editor'> 
     <label>Edit name : </label><input type="text" [(ngModel)]="temp.name"> 
     <br> 
     <label>Edit email : </label><input type="text" [(ngModel)]="temp.email"> 
     <br> 
     <label>Edit phone number: </label><input type="text" [(ngModel)]="temp.phone"> 
     <br> 
     <div class="description"> 
     Description: 
     <br> 
     <textarea rows="4" cols="50" [(ngModel)]="temp.description"></textarea> 
     </div> 
     <br> 
     <input type="button" (click)="onCreateContact()" class="button" value="Save Changes"/> 
    </div> 
`, 
    inputs:["contact"], 
    styles:[ 
     ` 
     label { 
      display: inline-block; 
      width: 145px; 
      border-left: 3px solid #006ec3; 
      padding-left: 8px; 
      padding-bottom: 8px; 
     } 
     .description{ 

      border-left: 3px solid #006ec3; 
      padding-left: 8px; 
      padding-bottom: 8px; 
     } 
     ` 
    ] 
    }) 

export class ContactEditorComponent implements OnInit{ 

    public contact:Contact; 
    public temp:Contact; 
    constructor(private router:Router){ 

    } 

    onCreateContact(){ 
     this.contact = (<any>Object).assign({}, this.temp); 
     console.log(this.contact.name); 
     this.router.navigate(['Contacts']); 
    } 

    ngOnInit(){ 
     this.temp = (<any>Object).assign({}, this.contact); 
    } 
} 

我所有的通訊錄保存在包含聯繫人的常量數組另一個文件，並通過contact.service訪問。

Answer 1

這與Angular無關，並且與JavaScript有關。

下面是一個例子：

const parent = {}; 
parent.contact = {id: 'c1'}; 
const child = {}; 
child.contact = parent.contact; 

現在無論child.contact和parent.contact是同一個對象的引用。所以

child.contact.id = 'c2'; 
console.log(parent.contact.id); 

將打印'c2'。

這就是你在第一個例子中所做的。現在

你的第二個例子的作用：

const parent = {}; 
parent.contact = {id: 'c1'}; 
const child = {}; 
child.contact = parent.contact; 
child.temp = {id: 'c1'}; // clone of child.contact 

所以，現在，child.temp引用一個新的對象，也就是從child.contact和parent.contact不同（複印件）。

然後你正在修改的temp接觸ID：

child.temp.id = 'c2'; 

然後，保存時，你在做

child.contact = {id: 'c2'}; // clone of child.temp 

所以，現在你有3個不同的對象：一個是由parent.contact引用，並且仍然具有'c1'作爲id，child.temp是parent.contact的修改副本，而child.contact是child.temp的另一個副本。

如果你想改變由child.contact和parent.contact引用的對象的id的值，你所需要的，而不是做

child.contact.id = temp.contact.id; 

，或者在你的例子：

Object.assign(child.contact, temp.contact);