Question

我对BehaviorSubject有一些问题。这是三个组件的共享服务：

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

@Injectable()
export class StageEndService {

  private stageNumber = new BehaviorSubject<number>(0);
  private stageNumberPassed = new BehaviorSubject<number>(0);

  stageNumber$ = this.stageNumber.asObservable();
  stageNumberPassed$ = this.stageNumber.asObservable();

  announceStageNumber(num) {
    this.stageNumber.last(num);
  }

  announceStageNumberPassed(num) {
    this.stageNumberPassed.last(num);

  }
}

以下是改变服务中值的两个组件之一的第一部分：

import { StageEndService } from './../../../common/services/stage-end.service';

@Component({
...
providers: [StageEndService]
})

...
private value = 6;

constructor (private stageEndService: StageEndService) {

  this.stageEndService.announceStageNumber(value);

}

第二个组件类似，但更改了stageNumberPassed的值。

在我的最后一个组件中，我正在尝试订阅但是失败（console.log返回0）：

import { StageEndService } from './../../../common/services/stage-end.service';

// there's no provider here since it's not necessary if I'm correct

 constructor(private stageEndService: StageEndService) {}

ngOnInit() {
  this.stageNumberSubscription = this.recruitmentEndService.stageNumber$.subscribe(response => {
  this.stageNumber = response;
});

不知道问题出在哪里。当我记录传递给服务中的函数的值时，它返回正确的数字。不知道这是否重要，只是以防万一：最后一个组件（我正在尝试订阅）是第一个组件的曾孙，我第一次设置新值。

Answer 1

不要将服务添加到每个组件的提供商。这样，每个组件都有自己的实例，您无法使用它来在服务之间进行通信。

仅在AppModule或共享父组件中提供一次服务。

Answer 2

this.recruitmentEndService.stageNumber$.subscribe(response => {
  this.stageNumber = response;
});

应该是

this.stageEndService.stageNumber$.subscribe(response => {
  this.stageNumber = response;
});

Angular 2无法订阅共享服务

2 个答案: