0

我有一个关于我的 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 解决并具有正确的数据应用程序将被初始化并且一切都很好。

现在我要添加一个新功能，在某些情况下配置不存在，我需要实现一个登录页面并将其显示给用户，然后在登录后将获取配置并初始化应用程序。我想知道如何实现该结构的登录组件？基本上我需要以某种方式添加到应用程序模块中，当 window.ConfigReady 不存在时，使用另一个组件signInComponent将其显示给用户。任何有关如何在 Angular 中执行此操作的帮助和行会都将不胜感激！谢谢

4

1 回答 1

0

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

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/

希望这可以帮助。

于 2018-08-17T18:45:00.147 回答