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);