0

在我的 Angular 8 项目中，我有一个使用从服务器UserService请求电流的方法，并将响应异步分配给它的公共字段。我将 a注入并复制到它自己的字段中，该字段绑定到其 HTML 模板文件中定义的内容。为了强制Angular完成加载之前的调用，我实现了接口并将其设置为根路由（“”）的解析器。UserHttpClientuserUserServiceAppComponentngOnInitthis.userService.useruserspanUserngOnInitResolve<User>UserService

我的问题是，当应用程序启动时，在激活路由器之前AppComponent.ngOnInit调用，解析器从服务器加载，因此无法在其 HTML 中显示加载。是否可以在加载引导组件（）之前加载数据，即在调用其方法之前？UserAppComponentUserAppComponentngOnInit

4

1 回答 1

1

您可以使用 APP_INITIALIZER 来执行此操作，该函数将在应用程序初始化之前执行

https://angular.io/api/core/APP_INITIALIZER

在你的 app.module.ts

export function initializeConfig(initService: InitService) {
  const x = (): Promise<any> => {
    return initService.Init();
  };
  return x;
}

@NgModule({
  ...
  providers: [
    InitService,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeConfig,
      deps: [InitService],
      multi: true
    },
  ],
  ...
})

初始化服务.ts

@Injectable()
export class InitService {

  constructor(private service: YourService) {
  }

  Init() {
    return new Promise<void>((resolve, reject) => {
      this.service.loadDataBeforeBootstrap.then( () => {
        resolve();
      }).catch( error => {
        reject(error);
      });
    });
  }
}
于 2020-02-05T15:27:52.390 回答