组件订阅看不到带有 Subject Observable 调用 next() 的 Angular 服务

Question

我想从 Angular 服务中检索更新的对象值（借用者）。我在 Service 中创建了一个 RxJS Subject，以便多个组件可以订阅它并获取更新的值。

当我通过组件中提供的服务订阅Subject时，发现即使从BorrowerService调用.next()，也从来没有调用过onNext()函数参数。

如果我确实在 BorrowerService 类中订阅，我发现 .next() 按预期工作。似乎 Subject 是调用 .next() 的 Service 类和组件之间的不同实例，因此没有获得该订阅。

这是对 Angular 服务或 Observable 的理解失败吗？如何在不知道何时调用 .next() 的情况下更新 Service 中的值并被动获取 Component 中的更改？

borrower-report.component.ts

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

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

borrower.service.ts

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

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

Answer 1

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

然后您可以将服务导入到您已有的组件中，provider 将成为父模块。基本思想是父模块将为所有子组件托管服务，因此所有子组件将接收相同的服务实例（因此具有相同的值）。

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

第二个注意事项：如果您希望从您的主题中推送更新，您还需要使用 BehaviorSubject。订阅 BehaviorSubject 会自动更新，而订阅 Subjects 必须手动调用。

Answer 2

考虑以下几点：

borrower.service.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);
  }
}

然后在你的组件中：

borrower-report.component.ts

获取您所做的值：

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

设置一个新值：

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

并且不要忘记在同一个模块的提供数组中添加服务和声明数组中的组件。