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

Question

我想从 Angular 服务中检索更新的对象值(借款人)。我在服务中创建了一个 RxJS Subject，以便多个组件可以订阅它并获取更新后的值。

当我通过组件中提供的服务订阅主题时，我发现 onNext() 函数参数从未被调用，即使 .next() 是从 BorrowerService 调用。

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

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

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 的订阅则必须手动调用。