在引导Angular2应用程序之前发出AJAX请求[重复]答案

【问题标题】：Make AJAX request before bootstrapping Angular2 application [duplicate]在引导Angular2应用程序之前发出AJAX请求[重复]
【发布时间】：2016-08-01 19:55:36
【问题描述】：

在我的 Angular2 应用程序中，我需要根据调用结果从 AuthenticationService 和引导应用程序调用某些函数。问题是 AuthenticationService 依赖于来自 @angular/http 的 HTTP，我对如何在调用引导函数之前手动构建 http 服务知之甚少。在这个问题angular2 bootstrap with data from ajax call(s) 中接受的答案描述了我想要完美实现的目标，但不幸的是它被赋予了一些以前版本的 Angular2。

我尝试用这种方式创建 http 服务：

let injector = ReflectiveInjector.resolveAndCreate(HTTP_PROVIDERS)
let http = injector.get(Http);

但我在 XsrfCookieStrategy 或类似的东西中得到了空引用异常。我相信注入一些空的 XsrfStrategy 是可能的，但它似乎更像是一个 hack，而不是一个好的解决方案。所以问题是：有什么好的（官方）方法来引导 Angular2 应用程序，预先提供一些依赖项，类似于我上面添加的链接。

【问题讨论】：

您可以引导一个只执行 ajax 调用的组件，并让它引导您的真实组件……虽然您可能只想对您的主要组件进行编程，以便它可以显示您的应用程序之前的状态调用以及自己进行调用。
Jason，我想我能明白你的意思，但是有没有任何示例或代码可以说明以这种方式构建应用程序的想法？我想在引导程序中运行的代码是主要且唯一的入口点，因此它应该在任何路由（url）上执行，甚至在路由成为事物之前。所以我想知道什么是正确的角度方式来做到这一点。我认为将此代码放在 bootstrap.ts 文件中会是个好主意
我还没有找到“最好的方法”来做到这一点，我也有同样的问题。这就是为什么我发表评论而不是答案的原因，可能有更好的方法来做到这一点。你可以做什么有一个“ParentComponent”，你可以引导它并执行初始 API 调用，并让它在你的初始调用完成时包含你的主要组件和一个 ngIf <main-component *ngIf="authCompleted"></main-component>

标签： angular bootstrapping

【解决方案1】：

class AuthService {
  isLoggedIn:BehaviorSubject<boolean> = BehaviorSubject<boolean>(false);
  checkLogin(http:Http) {
    return http.get(...)
    .map(result => result.json())
    .do(result => this.isLoggedIn.next(result)
  }
}

bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  AuthService,
  { provide: APP_INITIALIZER, 
    useFactory: (authService:AuthService) => authService.checkLogin(),
    deps: [AuthService],
    multi: true
  }
]);

另见How to pass parameters rendered from backend to angular2 bootstrap method

【讨论】：