Angular 2 无状态还是有状态？

Question

所以这是我的问题。我这里有这个组件，它编辑通过输入传递的联系人。此代码有效，当我更改输入文本中的某些内容（双向数据绑定）然后 "saved" 当点击保存并路由到另一个组件（显示所有联系人列表）时，联系人参数会更改。

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

}

现在，如果我以这种方式更改我的 class，方法是添加一个 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 是 [=18 的修改副本=], 和 child.contact 这是 child.temp.

的另一个副本

如果要更改 child.contact 和 parent.contact 引用的对象的 id 值，则需要执行

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

或者，在您的示例中：

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

Angular 2 无状态还是有状态？

Angular 2 stateless or stateful?

stateful

stateless

angular