Question

我对Angular应用有疑问，我有一个应用可以从API获取其初始配置数据，并可以使用这些配置来引导应用。这是ApiConfigService：

export class ApiConfigService {
    public initialized: Promise<any>;

    constructor(
        private readonly windowService: WindowService
    ) {
        this.initialized = window.configReady;
    }
}

这是Api配置工厂：

import { ApiConfigService } from '../services/api-config.service';

export function fetchApiConfigFactory(
    apiConfigService: ApiConfigService
) {
    return () => apiConfigService.initialized;
}

在我的应用程序模块中，这就是我在提供程序中拥有的：

{ provide: APP_INITIALIZER, useFactory: fetchApiConfigFactory, multi: true, deps: [ApiConfigService] },

因此，应用程序初始化取决于来自window.ConfigReady的承诺。如果window.ConfigReady解析并拥有正确的数据应用程序，则将初始化并且一切都很好。

现在，我将添加一个新功能，即在某些情况下该配置不存在，我需要实现一个登录页面并将其显示给用户，然后在登录后将获取配置，然后将应用初始化。我想知道如何按照这种结构实施标志？基本上，我需要向app模块添加某种方式，以便在不存在window.ConfigReady时，使用另一个组件signInComponent来向用户显示。在Angular中如何做到这一点的任何帮助和行会都将不胜感激！谢谢

Answer 1

现在，您已经使用APP_INITIALIZER将服务注入到App模块中，这意味着它将在应用程序之前执行，而不管应用程序上的任何组件如何。在您的情况下，我建议使用路由方法，对于每个路由URL，您都可以创建一个路由解析器，该解析器将在将指定的组件加载到路由之前执行。

export const appRoutes: Routes = [
    { path: '/home', component: HomeComponent,resolve:{config:ConfigResolver} },
    { path: '/SignIn', component: SignInComponent },

    {path:'404',component:Error404Component}

];

还要在appConfigService中检查数据是否已经加载，因为该服务将在每条路由激活时执行，因此在服务内部，您无需再次从任何API提取数据。

https://angular.io/api/router/Resolve

https://alligator.io/angular/route-resolvers/

希望这会有所帮助。

Angular应用无法引导时如何添加新组件

1 个答案: