Angular 行为主题仅显示初始值/重播主题不显示更新值

背景：

我有一个服务，我有一个开放的基于图层的地图。地图组件有自己的服务

单击图标时会生成一个弹出窗口。此弹出窗口上有一个按钮，单击该按钮时，会从弹出窗口上显示的对象中获取一些数据，然后导航到其他组件

我正在尝试将此数据发布/添加到行为主题，然后在新组件中订阅它。单击图标时，数据将添加到行为主题。弹出组件有自己的服务

在目标组件中，我尝试使用异步管道订阅模板中的弹出式服务行为主题

问题：

行为主体上的observable仅返回初始值。关于行为主题的下一个函数似乎没有向其中添加新数据。它总是给出新的值

使用Replay subject时，不会显示任何内容。下一个函数似乎根本没有效果

代码：

弹出式服务

\u analysis BehaviorSubject:BehaviorSubject=new BehaviorSubject（）；
//其他代码
附加元素（元素：任何）{
log（'向行为主体添加新元素'，元素）；
本._.主题下一步（要素）；
}
getElement$（）：可观察{
返回此项。_analysisBehavitySubject.asObservable（）；
}

地图服务

getAnalysisBehaviorSubject（）：可观察{
返回此.clusPopupService.getElement$（）；
}

目的地服务

getAnalysisBehaviorSubject（）：可观察{
返回此.mapService.getAnalysisBehaviorSubject（）；
}

然后在目标组件中只有一个异步管道

我已经尝试过的：

直接从弹出式服务导入行为主题，而无需在我的项目结构中移动它

使用行为主题而不是重播主题，如示例代码所示

将所有三项服务添加到app.module.ts中的提供商阵列。行为主体仍然发出原始值，而重播主体什么都没有

更新： 弹出式服务

商店服务

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

@Injectable({
  providedIn: 'root'
})
export class StoreService {
  _analysisBehaviourSubject: BehaviorSubject<any> = new BehaviorSubject();
  analysis$: Observable<any> = this._analysisBehaviourSubject.asObservable();
  constructor() {
    console.log('I AM THE STORE');
  }

  addElement(element: any) {
    console.log('adding new element to behaviour subject', element);
    this._analysisBehaviourSubject.next(element);
  }
  getElement$(): Observable<any> {
    return this.analysis$;
  }
}

从'@angular/core'导入{Injectable}；
从“rxjs”导入{BehaviorSubject，ReplaySubject}；
从“rxjs”导入{Observable}；
@注射的({
providedIn:'根'
})
导出类存储服务{
_AnalysisBehaviorSubject:BehaviorSubject=新的BehaviorSubject（）；
analysis$：Observable=这个；
构造函数（）{
log（“我就是商店”）；
}
附加元素（元素：任何）{
log（'向行为主体添加新元素'，元素）；
本._.主题下一步（要素）；
}
getElement$（）：可观察{
返回此.analysis$；
}
}

我认为每次使用asObservable（）函数调用getElement$（）时，都会创建一个新的可观察对象。我觉得这个问题不是100%清楚

我的建议是在类级别而不是方法级别创建可观察的

因此，在弹出式服务中，您可以执行以下操作：

\u分析行为主题：ReplaySubject=新的ReplaySubject（）；
_analysis$：Observable=这个；

---

或者，您可以直接订阅主题，因为它扩展了可观察性。

我想出来了。主题图案及其阴影效果良好

在上面的弹出式服务中，我通过href导航到该组件。我最好的猜测是，这会破坏组件树，并且保存这些值的服务实例也会被破坏

尽管我无法证明这一点，但我确实尝试实现了一个重播主题，在我从一个组件导航到另一个组件时进行更新，然后在我的项目中的新组件处订阅它，效果很好。因此，我将这一点归因于href的使用

在按下打开层的内部html中的按钮后，需要找到另一种方法来路由到我的组件

---

感谢所有抽出时间阅读或回复此内容的人

尝试共享整个服务类而不是单个片段，因为这样更容易理解和掌握方法的上下文。此外，console.log是否正在使用所需的消息/元素执行？此外，如果要在此处显示ReplaySubject，请根据_analysisReplaySubject调整_AnalysisBehavior。这将有助于减少困惑。谢谢你提出改进问题的建议。我现在已经附加了弹出式服务和新实现的商店服务。我还把名字改成了行为主题。你能在stackblitz中重新创建它吗？最好是用你的项目的抽象版本，而不是你的实际项目。谢谢你的回答。我尝试实现这段代码，但是在一个商店服务中，我的继承权与app.module.ts和app.component.ts的继承权级别相同。我希望在导航到分析/目标组件时避免破坏服务。不幸的是，这不起作用。使用href导航是否会从头开始破坏和重建整个组件树？这可能是一个问题，即每次树被破坏时，当分析组件及其服务被加载时，会创建一个新实例，从而丢弃以前更新的值吗？会创建一个新的可观察对象，但基础主题保持不变。通过

.asObservable（）

公开主题是完全可以的。

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

@Injectable({
  providedIn: 'root'
})
export class StoreService {
  _analysisBehaviourSubject: BehaviorSubject<any> = new BehaviorSubject();
  analysis$: Observable<any> = this._analysisBehaviourSubject.asObservable();
  constructor() {
    console.log('I AM THE STORE');
  }

  addElement(element: any) {
    console.log('adding new element to behaviour subject', element);
    this._analysisBehaviourSubject.next(element);
  }
  getElement$(): Observable<any> {
    return this.analysis$;
  }
}