如何在Angular 2中的兩個不同組件之間進行數據共享

我處於Angular 2的學習模式。我正在實施角度單身服務，以瞭解它是如何工作的。這是我的服務類如何在Angular 2中的兩個不同組件之間進行數據共享

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

@Injectable() 
export class DataService { 
    constructor() { 
     console.log("new instance"); 
    } 
    dataValue: string = "i am singleton"; 
}

這是我的兩個組成部分，其中我使用該服務第一個

import { Component } from '@angular/core'; 
import { DataService } from './dataservice'; 

@Component({ 
    selector: 'first', 
    template: ` 
       <div> 
         Your Input : <input type = "text" [(ngModel)] = "ChangeByFirstComponent"> 
         You Entered : {{ChangeByFirstComponent}} 
       </div> 
       ` 
}) 

export class FirstComponent { 
    constructor(private _dataService: DataService) { } 
    ChangeByFirstComponent: string; 

    get DataValue(): string { 
     return this._dataService.dataValue; 
    } 

    set DataValue(ChangeByFirstComponent) 
     { 
      this._dataService.dataValue = this.ChangeByFirstComponent; 
     } 
} 
second one 
import { Component } from '@angular/core'; 
import { DataService } from './dataservice'; 

@Component({ 
    selector: 'second', 
    template: ` 
       <div> 
         Your Input : <input type = "text" [(ngModel)] = "ChangeBySecondComponent"> 
         You Entered : {{ChangeBySecondComponent}} 
       </div> ` 

}) 

export class SecondComponent { 
    constructor(private _dataService: DataService) { } 
    ChangeBySecondComponent: string; 

    get DataValue(): string { 
     return this._dataService.dataValue; 
    } 

    set DataValue(ChangeByFirstComponent) { 
     this._dataService.dataValue = this.ChangeBySecondComponent; 
    } 
}

我提供了根模塊的供應商爲單個實例，因此，它是工作的罰款當我檢查它扔開發工具。我正在實施，如果用戶更改firstcomponent的值，所以它應該在第二組件上更改（這是單件提供給我們的，使數據輕鬆共享）。我沒有得到我的輸出。問題是什麼？

來源

2017-09-30 faizan

使用'BehaviorSubject'在服務共享數據，然後在組件的代碼不依賴在特定的執行順序（在設置值之前讀取） –

我沒有感到抱歉 – faizan

如果'SecondComponent'在'FristComponent'寫入數據之前讀取數據，則不會得到值。使用'BehaviorSubject''SecondComponent'可以訂閱並在FirstComponent傳遞一個值時得到通知。在這裏應該有足夠的例子。 –

您可以使用BehaviorSubject做到這一點，更多的BehaviorSubjecthere 我已經給了答案類似的問題here

來源

2017-09-30 19:27:32

如何在Angular 2中的兩個不同組件之間進行數據共享

回答

相關問題