如何在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中的两个不同组件之间进行数据共享

回答

相关问题