2個組件之間的Angular2通信

我正在使用Angular2 rc5，並嘗試通過服務構建組件通信。對於數組，它像預期的那樣工作，但如果我更改一個字符串，它不會更新。2個組件之間的Angular2通信

我的主要成分是這樣的：

import {Component} from '@angular/core'; 
import {ShareServiceService} from "../share-service.service"; 
import {ChildTwoComponent} from "../child-two/child-two.component"; 
import {ChildOneComponent} from "../child-one/child-one.component"; 

@Component({ 
    selector: 'parent', 
    template: ` 
     <h1>Parent</h1> 
     <div> 
      <child-one></child-one> 
      <child-two></child-two> 
     </div> 
    `, 
    providers: [ShareServiceService], 
    directives: [ChildOneComponent, ChildTwoComponent] 
}) 
export class ParentComponent { 
    constructor() {} 
}

我的第一個孩子組件：

import {Component} from '@angular/core'; 
import {ShareServiceService} from "../share-service.service"; 

@Component({ 
    selector: 'child-one', 
    template: ` 
     <div style="float:right; width: 45%"> 
      <pre>title: {{title}}</pre> 
      <pre>title: {{_sharedService.testTitle}}</pre> 
      <div> 
      <ul *ngFor="let dataElement of data"> 
       <li>{{dataElement}}</li> 
      </ul> 
      </div> 
     </div> 
     ` 
    }) 
export class ChildOneComponent{ 
    data:string[] = []; 
    title:string; 

    constructor(public _sharedService:ShareServiceService) { 
     this.data = this._sharedService.dataArray; 
     this.title = this._sharedService.testTitle; 
    } 
}

第二個孩子組成：

import {Component} from '@angular/core'; 
import {ShareServiceService} from "../share-service.service"; 

@Component({ 
    selector: 'child-two', 
    template: ` 
     <div style="float:left; width: 45%"> 
      <pre>title: {{title}}</pre> 
      <pre>titleObj: {{titleObj.title}}</pre> 
      <div> 
       <ul *ngFor="let dataElement of data"> 
        <li>{{dataElement}}</li> 
       </ul> 
      </div> 
     <input type="text" [(ngModel)]="dataInput"/> 
     <button (click)="addData()">addData</button> 
     <button (click)="updateTitle()">updateTitle</button> 
     </div> 
     ` 
}) 
export class ChildTwoComponent { 
    dataInput:string = 'Testing data'; 
    data:string[] = []; 
    title:string; 

    constructor(public _sharedService:ShareServiceService) { 
     this.data = this._sharedService.dataArray; 
     this.title = this._sharedService.testTitle; 
    } 

    addData() { 
     this._sharedService.insertData(this.dataInput); 
     this.dataInput = ''; 
    } 

    updateTitle() { 
     this._sharedService.updateTestTitle(this.dataInput); 
     this.dataInput = ''; 
    } 
}

我的服務：

import {Injectable} from '@angular/core'; 

@Injectable() 
export class ShareServiceService { 
    dataArray:string[] = []; 
    testTitle:string = "should be updated"; 

    insertData(data:string) { 
     this.dataArray.push(data); 
    } 

    updateTestTitle(newTitle:string) { 
     this.testTitle = {title: newTitle}; 
    } 
}

我試圖實現的是，如果我在輸入字段中輸入綁定「」的內容並按下兩個組件中的標題更新的「updateTitle」。但目前不工作。

如果我通過點擊「adddata」按鈕將我的輸入值添加到一個數組，所有作品像例外和我的數據元素列表顯示所有元素。

有人知道我爲什麼不能更新字符串嗎？

在此先感謝！

來源

2016-08-22 Hansinger

如果複製對象或數組，則複製引用。（源和目的地）都指向同一個對象。如果一方修改對象，則另一方會看到修改。

如果複製原始值（字符串，數字，布爾值），則目標將獲取該值的副本，並且源和目標之間沒有任何關聯。

// copies a reference 
    this.data = this._sharedService.dataArray; 
    // copies the value 
    this.title = this._sharedService.testTitle;

你可能想要的是一個observable，它在共享服務中的屬性被修改時發出事件。

詳情請參閱https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

來源

2016-08-22 16:30:59

2個組件之間的Angular2通信

回答

相關問題