角2のステートレスまたはステートフル？

Question

これは私の問題です。私は入力を通過した連絡先を編集するこのコンポーネントをここに持っています。このコードは機能し、入力テキスト（2通りのデータバインディング）で何かを変更すると連絡先パラメータが変更され、ヒットしたら別のコンポーネント（すべての連絡先の一覧を表示）にルーティングされたときに「保存」されます。私はその後、一時変数を変更し、私の連絡先のクローンを取るtemp:Contact変数を追加する連絡先オブジェクトにそれをクローン化することにより、このように私のクラスを変更した場合、私が打ったとき

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

} 

は今、変化はもう保存されませんボタン。

@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変更している：ある1：

child.temp.id = 'c2'; 

を保存するとき、あなたはそう

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

をやっているし、今では3種類のオブジェクトを持っていますparent.contactによって参照され、まだidとして 'c1'を有し、parent.contactの修正コピーであるchild.tempと、child.tempのさらに別のコピーであるchild.contactとを含む。

あなたはchild.contactとparent.contactが参照するオブジェクトのIDの値を変更したい場合は、あなたが

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

や、あなたの例で操作を行う代わりに、必要があります。

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