Angular Observable - 多个订阅不会被捕获

Question

我有一个非常简单的场景，其中包含一个输入字段和一堆根据输入字段中键入的内容进行 API 调用的部分。

现在输入字段本身位于不同的组件中，所以我所做的是在服务中创建一个 behaviorSubject，有一个默认值，然后任何时候用户更改输入字段我只是在服务中调用另一个内部方法在 behaviorSubject 上调用 next。

然后，在我的不同 UI 部分中，我订阅了这个 behaviorSubject 并希望随时检查更改的值进行 API 调用。请注意，每个部分的 API 端点都不同，但它们需要同时触发。

但是，我无法让它工作。这是我到目前为止所拥有的

我的服务 changeService.ts 中的代码：

valueChangedSubject: BehaviorSubject<any>: new BehaviorSubject({});
constructor() {}
valueHasChanged(updatedValue: any) {
  this.valueChangedSubject.next(updatedValue);
}

触发事件的一个组件中的代码：

valueChanged(changedVal: string) {
  this.changeService.valueHasChanged({val: changedval});
}

订阅行为主题的组件内的代码：

this.changeService.valueChangedSubject.subscribe((val:any) => {
   console.log('OK I am here ', val);
});

问题是“好的，我在这里”在刷新时第一次打印，但在任何时候我调用 valueChanged() 方法后它都不会触发 observable。

我知道我在这里遗漏了一些与“热可观察”相关的内容。但是什么以及怎么做呢？我尝试使用 share() 或 publish() 但无法按预期工作。

Answer 1

BehaviourSubject 是一个热门的 observable。 Hot 意味着，即使现在有订阅者，observables 也会触发新值。我认为您在问题中提供的代码没有任何问题。看起来不错。

您确定您的valueChangesSubject 不会在任何时候完成吗？例如，主题将在处理错误时完成。

您可以在订阅中使用 onCompleted 回调来检查您的 Observable 是否完成。

this.changeService.valueChangedSubject.subscribe(
  next => console.log('OK I am here ', next),
  error => console.error('Error. Observable completes', error),
  () => console.log('Observable completes. No more values will be submitted')
 );