Question

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

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

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

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

这里是我的第二个组件，就像firstcomonent一样做同样的事情

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

我希望功能如果用户从第一个组件输入内容，第二个组件将因服务类的单个实例而过快地获得更改

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 2

1 个答案: