Angular 从我的服务文件中作为目标时未反映对BehaviorSubject的更新

我正在使用

*ngIf

在我的

HomeComponent

中的3个组件之间切换。目前，我主要关注其中两个组件之间的关系，即

ProductListComponent

和

ProductDetailComponent

。在

ProductListComponent

中，我有一个

ProductListItemComponent

用于迭代每个产品。在我的

HomeService

内部，我正在使用

BehaviorSubject

类型的变量在

HomeComponent

中订阅要响应的

*ngIf

条件。my

HomeService

中的设置如下所示

//variable with the initial value
private FrameToggle: BehaviorSubject<string> = new BehaviorSubject('product-list');

//variable for watching BehaviorSubject as Observable
CurrentToggle = this.FrameToggle.asObservable();

//function for setting the BehaviorSubject
setFrameToggle(page: string){ this.FrameToggle.next(page); }

sendPageToggle(page: string){ this.homeService.setFrameToggle(page); }

在模板内部，我用这样的按钮触发它

<button (click)="sendPageToggle('value-to-trigger-desired-component'")>some text</button>

async prepareData(key: string, page: string){
    await (()=> {this.ProductData = this.setData(page);})();
    this.homeService.setFrameToggle(key);
}

我在我的

ProductListComponent

中创建了一个函数来调用此函数，该函数可以正常工作，但是该组件不会像从组件内部调用

setFrameToggle（）

函数时那样进行切换

我在

prepareData（）

函数中添加了一个

console.log（）

变量，目标是

ProductData

，并看到数据已成功加载。然后，我在

HomeService

中的

setFrameToggle（）

函数中添加了

console.log（）

，以记录从

ProductDetailComponentService

中的

prepareData（）

函数传入的值，该函数也成功返回结果

我甚至复制了该函数，从中删除了

async

，并删除了第一部分，因此该函数只调用

setFrameToggle（）

主服务中的功能只是想看看是否有一些隐藏的

承诺

混乱影响了发送的值的类型，但组件仍然没有切换。我将

HomeService

作为提供者正确导入到

ProductDetailComponent

的模块中，我不知道是什么原因导致它无法工作。有人能看出我做错了什么吗？

基于此

ProductListItemComponent和ProductDetailComponent I的内部 将HomeService作为提供者导入

我猜您正在处理多个HomeService实例。每当您将服务标记为组件或模块的提供者时，它都会将其限定为该组件或模块的范围，因此它不再是应用程序的单例，而是限定为您添加它的级别。因此，如果我将一个服务添加到我的组件提供者数组中，那么该组件的每个实例将获得该服务的不同实例

验证这一点的最简单方法（假设您使用的是支持这一点的Angular版本）是将HomeService更改为根注入，并将其从任何模块或组件设置中的所有提供程序阵列中删除：

@Injectable({
    providedIn: 'root'
})
export class HomeService{

---

或者，只需再次检查homeService是否仅在一个提供商阵列中，并且它的级别应高于与之交互的所有组件。

我将对此进行投票，因为您确实花了时间来解释这个问题，但是如果你能写一个小的总结就好了：）如果你能提供最小的stackbitz demook就更好了。我在这里坐了两个多小时，试图在stackblitz上构建它，结果它在连接到开发服务器时陷入了困境，我不知道问题从哪里开始，如何开始。我本来可以在我自己的机器smh上解决这个问题的。我是否应该将它导入到我的组件中，并在构造函数中设置一个私有变量？现在我想起来了，近一周前，我在使用其他服务中的服务时遇到了另一个小问题，那就是当我了解到我们现在需要将它们导入到该组件的模块中，并将其添加到提供者的阵列中以避免出现问题时，这意味着我需要将其导入到多个模块中。这有什么不同吗？还是它仍然导致了我的问题？是的，你的构造函数都是一样的。你只需要小心你如何设置你的服务提供商。根据您使用服务的方式，有时应将其设置为组件中的提供者，有时则应设置为根目录或模块中提供的提供者。从我掌握的信息来看，很难告诉你应该如何设置。如果您遇到问题，您在服务上设置了一些内容，但在从服务中拉出时，在其他地方没有反映出来（10次中有9次），这是因为您有多个服务实例，但没有意识到这一点。