4

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

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

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

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

借款人报告.component.ts

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

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

借款人.service.ts

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

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

2 回答 2

8

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

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

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

第二个注意事项：如果你想从你的主题推送更新，你也需要使用 BehaviorSubject。对 BehaviorSubject 的订阅将自动更新，而对 Subjects 的订阅必须手动调用。

于 2017-10-06T19:57:10.797 回答
2

考虑以下 ：

借款人.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);
  }
}

然后在您的组件中：

借款人报告.component.ts

获取您所做的值：

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

设置一个新值：

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

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

于 2017-10-06T19:54:26.650 回答