时间戳

首页 > 解决方案 > 从我的服务文件定位时未反映对 BehaviorSubject 的更新

angular - 从我的服务文件定位时未反映对 BehaviorSubject 的更新

问题描述

我*ngIf用来在我的HomeComponent. 目前，我专注于其中两个之间的关系，即ProductListComponentand ProductDetailComponent。在里面ProductListComponent我有一个ProductListItemComponent用于迭代每个产品。在我的内部，我HomeService使用一个类型的变量BehaviorSubject来订阅，HomeComponent以便对*ngIf条件做出反应。我的设置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); }

在里面，ProductListItemComponent我ProductDetailComponent将它HomeService作为提供者导入并setFrameToggle()像这样定位函数。

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

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

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

到目前为止，一切正常，并且在单击按钮时会打开和关闭相应的组件。

当我继续在ProductDetailComponentService要提供的数据中获取数据时，ProductDetailComponent我遇到了异步问题，因为在ProductDetailComponent获取数据之前正在加载。

我通过将 导入ProductDetailComponentService作为ProductListItemComponent提供程序并将 导入HomeService并ProductDetailComponentService使用async函数首先获取数据然后FrameToggle在HomeService. 函数看起来像这样

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

我在其中创建了一个函数ProductListComponent来调用该函数，该函数有效，但是该组件不会像setFrameToggle()从组件内部调用该函数时那样切换。

我在函数内添加了一个console.log()针对ProductData变量的变量，prepareData()并看到数据已成功加载。console.log()然后我在setFrameToggle()函数中添加了一个来记录从函数HomeService传入的值，其中也成功返回了结果。prepareData()ProductDetailComponentService

我什至复制了该函数，消除了async它并删除了第一部分，因此该函数仅调用该setFrameToggle()函数，HomeService以查看是否可能存在某种隐藏Promise<string>的混淆，从而影响正在发送的值的类型，但组件仍然没有切换。我已将's 模块作为提供程序HomeService正确导入ProductDetailComponent，我不知道是什么导致它不起作用。谁能发现我在这里做错了什么？

标签： angulartypescript

解决方案

基于此

在 ProductListItemComponent 和 ProductDetailComponent 内部，我将 HomeService 作为提供者导入

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

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

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

或者，只需仔细检查您的 homeService 是否仅在一个提供程序数组中，并且它应该位于与它交互的所有组件之上。

推荐阅读