在我的 rxjs BehaviorSubject 中合并来自不同来源的值
To merge values from different sources in my rxjs BehaviorSubject
我正在使用 rxjs BehaviorSubject 创建一个服务,在从 Component1 发送值并在 Component3 中订阅时,我在 Component3 中获得了值,这已实现
服务文件
`import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class UserService {
constructor() { }
// Observable navItem source
public _navItemSource = new BehaviorSubject(undefined);
// Observable navItem stream
navItem$ = this._navItemSource.asObservable();
// service command
changeNav(nu) {
this._navItemSource.next([...nu]);
}
}`
组件 1
`this._userService.changeNav(self.notificationslist);`
组件 3
`this.subscription = this._userService.navItem$.subscribe(item =>
this.item1 = item);`
现在我想在另一个组件 (Component2) 中使用相同的服务将一些不同的值发送到相同的组件 Component3
组件 2
`this._userService.changeNav(this.updatedFlag);`
组件 3
`this.subscription = this._userService.navItem$.subscribe(item =>
this.item1 = item);`
然后在 Component3 上订阅它后,我应该从 Component1 和 Component2 获取所有值。
所以我更新了我的服务文件,但我收到以下错误
caused by: this._navItemSource.asObservable(...).scan is not a function
由于我是 rxjs 的新手,请纠正我哪里出错了。
更新服务文件
`import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class UserService {
constructor() {
}
// Observable navItem source
public _navItemSource = new BehaviorSubject(undefined);
// Observable navItem stream
navItem$ = this._navItemSource.asObservable().scan((acc, one) =>(acc +
one));
// service command
changeNav(nu) {
this._navItemSource.next([...nu]);
}
}`
确保导入扫描运算符。并在扫描功能中合并您的结果,您可以 return a JSON 与发出的先前值和新值
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import "rxjs/add/operator/scan";
@Injectable()
export class UserService {
constructor() {
}
// Observable navItem source
public _navItemSource = new BehaviorSubject(Object([]));
// Observable navItem stream
navItem$ = this._navItemSource.asObservable().scan((acc, one) => {
return {
'previous': acc, 'new': one
}
});
// service command
changeNav(nu) {
this._navItemSource.next([...nu]);
}
}
我正在使用 rxjs BehaviorSubject 创建一个服务,在从 Component1 发送值并在 Component3 中订阅时,我在 Component3 中获得了值,这已实现
服务文件
`import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class UserService {
constructor() { }
// Observable navItem source
public _navItemSource = new BehaviorSubject(undefined);
// Observable navItem stream
navItem$ = this._navItemSource.asObservable();
// service command
changeNav(nu) {
this._navItemSource.next([...nu]);
}
}`
组件 1
`this._userService.changeNav(self.notificationslist);`
组件 3
`this.subscription = this._userService.navItem$.subscribe(item =>
this.item1 = item);`
现在我想在另一个组件 (Component2) 中使用相同的服务将一些不同的值发送到相同的组件 Component3
组件 2
`this._userService.changeNav(this.updatedFlag);`
组件 3
`this.subscription = this._userService.navItem$.subscribe(item =>
this.item1 = item);`
然后在 Component3 上订阅它后,我应该从 Component1 和 Component2 获取所有值。 所以我更新了我的服务文件,但我收到以下错误
caused by: this._navItemSource.asObservable(...).scan is not a function
由于我是 rxjs 的新手,请纠正我哪里出错了。
更新服务文件
`import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class UserService {
constructor() {
}
// Observable navItem source
public _navItemSource = new BehaviorSubject(undefined);
// Observable navItem stream
navItem$ = this._navItemSource.asObservable().scan((acc, one) =>(acc +
one));
// service command
changeNav(nu) {
this._navItemSource.next([...nu]);
}
}`
确保导入扫描运算符。并在扫描功能中合并您的结果,您可以 return a JSON 与发出的先前值和新值
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import "rxjs/add/operator/scan";
@Injectable()
export class UserService {
constructor() {
}
// Observable navItem source
public _navItemSource = new BehaviorSubject(Object([]));
// Observable navItem stream
navItem$ = this._navItemSource.asObservable().scan((acc, one) => {
return {
'previous': acc, 'new': one
}
});
// service command
changeNav(nu) {
this._navItemSource.next([...nu]);
}
}