在调用 AppComponent.ngOnInit 之前加载数据

Question

在我的 Angular 8 项目中，我有一个 UserService 使用 HttpClient 从服务器请求当前 User 并将响应异步分配给它的 public user 字段。我将 UserService 注入 AppComponent 并在其 ngOnInit 中将 this.userService.user 复制到它自己的 user 字段中，该字段绑定到 [=20 的内容=] 在其 HTML 模板文件中定义。为了强制Angular在调用ngOnInit之前完成加载User，我在UserService中实现了Resolve<User>接口并将其设置为根的解析器路线 ("").

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

Answer 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
    },
  ],
  ...
})

init.service.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);
      });
    });
  }
}

在调用 AppComponent.ngOnInit 之前加载数据

Loading data before AppComponent.ngOnInit is called

angular

angular-ui-router

angular-httpclient

angular-resolver