Angular 14：在加载组件之前等待加载服务变量答案

【问题标题】：Angular 14 : Wait for a service variable to be loaded before loading a componentAngular 14：在加载组件之前等待加载服务变量
【发布时间】：2022-11-30 03:57:21
【问题描述】：

我使用延迟加载模块，当我到达我的模块的页面时，我使用服务的功能，该服务对该服务的全局变量执行操作。

我有一个函数可以从我的服务中加载这个全局变量。问题是无论我在我的模块中的什么地方调用这个函数，变量在第一次显示时都没有足够快地填充，所以我得到错误，因为我的变量在第一次显示时是空的。我是

我尝试在我的模块的构造函数中加载我的变量，但它仍然没有足够快地填充变量以供第一次显示。

在我的服务中：

export class ReferenceService {

    parts: any;

    constructor(
        private http: HttpClient
    ) { }

    loadParts() {
        this.http.get(apiUrl.partsGet).subscribe(data => this.parts = data);
    }

    getParts() {
        return this.parts;
    }

}

在我的模块中：

export class LaserfibreModule {
    constructor(private apiReference: ReferenceService) {
        this.apiReference.loadParts();
    }
}

在我的组件中： console.log(this.apiReference.getParts()) // return undefined

我想找到一种方法，使我的组件在未填充此变量“零件”之前不显示

我找到了一个临时解决方案，它在我的 app.component.ts 中调用我的“loadParts()”函数，它可以工作，但如果我这样做，它就不再是真正的延迟加载了

我尝试在我的模块提供程序中使用 APP_INITIALIZER，但它不起作用

【问题讨论】：

您要求仅在其模块加载后调用服务，但同时您要求在模块加载之前从该服务获取数据。这是不可能的！！要么在模块加载之前调用服务（它仍然是延迟加载，只是将 api 移动到 app.component.ts 级别，并不意味着你整个模块正在加载），或者让模块加载，然后调用服务。您可以在模块模板中显示加载指示器或空白屏幕，直到您从 api 获得响应。

标签： angular angular14

【解决方案1】：

这个答案是否有效将取决于您如何构建 Angular 应用程序，但您可能会使用路由解析器服务。路由解析器用于在路由到组件时预取数据。

这是路由解析器服务的基本示例：

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

import { Observable } from 'rxjs/Observable';

import { IProduct } from './product';
import { ProductService } from './product.service';

@Injectable()
export class ProductResolver implements Resolve<IProduct> {

    constructor(private productService: ProductService) { }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<IProduct> {
        let id = +route.params['id'];
        return this.productService.getProduct(id);
    }
}

您可以阅读完整文档here。有关如何连接它的更多详细信息，因为需要将解析器添加到组件的路由定义中。

如果您不使用路由，或者上述方法不合适，另一种选择是渲染组件模板的一部分，该部分取决于准备就绪时正在填充的数据（您可以显示一个加载微调器或其他东西） ).您可以使用简单的 *ngIf 来实现这一点 - 例如：

<div *ngIf="parts">
 {{ parts.name }}
</div>

【讨论】：