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

我所有的联系人都保存在另一个文件中，其中包含一个 Const 联系人数组，并通过 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);