组件订阅看不到主题为Observable并调用next（）的Angular服务

Question

如果我确实在 BorrowerService 类中订阅了，我发现 .next（） 按预期工作。主题似乎是调用 .next（） 的服务类和组件之间的不同实例，因此不会获得该订阅。

这是理解Angular Services或Observables的失败吗？如何更新服务中的值并被动地获取组件中的更改，而不知道何时调用 .next（）？

借款人-报告.组件. ts

@Component({
    ...
    providers:   [BorrowerService]
})
export class BorrowerReport {
    private borrower: Borrower;

    constructor(private borrowerService: BorrowerService) {
        this.borrowerService.borrowerChanged.subscribe(borrower => {this.borrower = borrower});
    }
}

借款人.服务. ts

@Injectable()
export class BorrowerService {
    public borrowerChanged: Subject<Borrower> = new Subject<Borrower>();

    //event handler
    selectBorrower(borrower: Borrower) {
        this.borrowerChanged.next(borrower);
    }
}

Answer 1

借款人.服务. ts

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


@Injectable()
export class BorrowerService {

  public borrowerChanged = new BehaviorSubject<string>('Defaut Value');
  borrowerChangedObservable = this.borrowerChanged.asObservable();
  constructor(){}

  changeValue(value: string): void {
    this.borrowerChanged.next(value);
  }
}

然后在组件中：

借款人-报告.组件. ts

要获得这些值，您需要:

constructor(private borrowerService: BorrowerService) {
    this.borrowerService.borrowerChangedObservable
       .subscribe((borrower) => {
              console.log(borrower);
          });
    }

要设置新值，请执行以下操作：

sendNewValueToBorrowerService(){
this.borrowerService.changeValue('my new value');
}

不要忘记在provides数组中添加服务，在同一个模块的declarations数组中添加组件。

Answer 2

问题在于您的服务范围，并且< code>@ngModule没有提供该服务。如果您希望这是一个单例服务(多个组件的同一个服务实例)，那么您将希望在包含所有子组件的父模块中提供服务。对于保证路线，请将其添加到您的< code>app.module.ts中。在模块中导入它，并像在组件中一样将其作为服务提供(但是，要将它作为提供者从组件中移除...您只希望父模块提供它)。

然后，您可以像以前一样将服务导入到组件中，提供程序将成为父模块。基本思想是父模块将承载所有子组件的服务，因此所有子组件都将接收相同的服务实例（因此具有相同的值）。

旁注：此 SO 答案提供了有关创建单例服务调用 ApiService 的详细信息，应作为可靠的指南。另一个顶部答案也提供了可靠的解释。

第二个注意:如果你想从你的主题推送更新，你也需要使用一个行为主题。对BehaviorSubject的订阅会自动更新，而对Subject的订阅必须手动调用。