Question

我已经找到了如何在根组件加载之前调用服务。但我无法找到一种方法让整个应用程序等待，直到服务成功完成其工作。换句话说，如何使其成为同步调用。该服务正在通过AJAX加载基本设置，我必须保持应用程序从启动到调用结束。

将*ngIf添加到router-outlet不起作用，会导致错误。

使用CanActivate阻止路径将阻止加载视图，但是我必须定义加载器屏幕并在履行承诺时从代码调用适当的路由。它不是很优雅。

有没有办法告诉Angular到STFU，直到某个值为true？

Answer 1

不确定您如何使用APP_INITIALIZER，但我假设您已为提供商设置了工厂功能。如果您确保该函数返回您的服务所做的API调用的承诺，那么应用程序初始化将被阻止，直到承诺得到解决。

E.g。创建一个名为app.initializer.ts

的文件

import { FactoryProvider, APP_INITIALIZER } from '@angular/core';
import { MyDataService } from './core/my-data.service';

export function initialAppSetup(provider: MyDataService) {

 // MyDataService's getInitialData must return a promise
 return () => provider.getInitialData()
}

export const ApplicationSetupProvider: FactoryProvider = {
 provide: APP_INITIALIZER,
 useFactory: initialAppSetup,
 deps: [MyDataService],
 multi: true
}

在app.module.ts导入ApplicationSetupProvider

import { ApplicationSetupProvider } from './app.initializer';

并将其添加到providers数组

providers: [ AuthorizationSetupProvider ],

保持Angular 2+应用程序加载，直到APP_INITIALIZER完成运行？

1 个答案: