如何使用 Angular 中服务 Class 的单个实例更新 2 个组件中的数据 2

Question

这是我的服务 class，其中我有一个名为“dataValue”的变量。

import { Injectable } from '@angular/core';
@Injectable()
export class DataService 
{
 constructor() 
{
console.log("new instance");
  }
 dataValue: string = "initial value";
}

这是我的第一个组件，我在其中使用我在此 component.and 中定义的变量获取和初始化服务变量，在组件变量上实现双向数据绑定。

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;
  }
}

这是我的第二个组成部分，在这里做与第一个组成部分相同的事情

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;
    }
}

我想要这样的功能，例如如果用户从第一个组件输入某些内容，第二个组件将由于服务的单个实例而过快地获得更改class

Answer 1

您可以使用 BehaviorSubject 实现此类功能。当第一个组件发生变化时，您可以将该更改推送到 BehaviorSubject，然后将 subscribe 推送到第二个组件中的那个，这样它就会得到第一个组件中出现的更改。你可以这样做，

import { Injectable } from '@angular/core';
@Injectable()
export class DataService 
{
 dataSubject: BehaviorSubject;
 constructor() 
{
this.dataSubject = new BehaviorSubject(null);
console.log("new instance");
  }
pushChanges(dataValue) {
  this.dataSubject.next(dataValue);
}
getChanges() {
  return this.dataSubject.asObservable();
}
 dataValue: string = "initial value";
}

在你的第一个组件中，你可以写，

this._dataService.pushChanges(this.ChangeByFirstComponent);

在你的第二个组件中，

this._dataService.getChanges().subscribe( 
changeByFirstComponent => {   

  // this method will be triggered only when there is change in first component 
  // and it's pushed on the `dataSubject`

  console.log(changeByFirstComponent);
}
)

你可以重复这个过程，你也想要反向功能。

如何使用 Angular 中服务 Class 的单个实例更新 2 个组件中的数据 2

How to update Data in 2 components using single instance of the Service Class in Angular 2

angular2-services

angular