typescript – angular2 bootstrap与来自ajax调用的数据

let dependencies = [
    //... a load of dependencies
    MyService
];

let injector = Injector.resolveAndCreate(dependencies);
let service: MyService = injector.get(MyService);

service.getData() // returns observable
    .toPromise()
    .then((d) => {
        // use data to append to dependencies

        bootstrap(App,dependencies)
    });

这里的问题是Angular2在引导主要组件之前不允许您访问应用程序引用及其注入器.请参阅源代码中的这一行： https://github.com/angular/angular/blob/master/modules/angular2/platform/browser.ts#L110.

一种方法可以是实现自定义引导程序而不是使用默认引导程序.类似的东西将应用程序创建和应用程序组件上的boostrapping分开.这样您就可以在两个任务之间加载一些东西.

这是一个示例实现：

function customBoostrap(appComponentType,customProviders) {
  reflector.reflectionCapabilities = new ReflectionCapabilities();
  let appProviders =
    isPresent(customProviders) ? [BROWSER_APP_PROVIDERS,customProviders] : BROWSER_APP_PROVIDERS;
  var app = platform(BROWSER_PROVIDERS).application(appProviders);

  var service = app.injector.get(CompaniesService);

  return service.getCompanies().flatMap((companies) => {
    var companiesProvider = new Provider('companies',{ useValue: data });
    return app.bootstrap(appComponentType,[ companiesProvider ]);
  }).toPromise();
}

并以这种方式使用它：

customBoostrap(AppComponent,[
  HTTP_PROVIDERS,CompaniesService
]);

公司将自动在组件内注入,例如：

@Component({
  (...)
})
export class AppComponent {
  constructor(@Inject('companies') companies) {
    console.log(companies);
  }
}

见相应的plunkr：https://plnkr.co/edit/RbBrQ7KOMoFVNU2ZG5jM?p=preview.

在这个时候,它有点hacky但这种方法可以作为功能请求提出……

编辑

看了ApplicationRef课程的文档后,我看到有一个更简单的解决方案;-)

var app = platform(BROWSER_PROVIDERS)
   .application([BROWSER_APP_PROVIDERS,appProviders]);

service.getCompanies().flatMap((companies) => {
  var companiesProvider = new Provider('companies',{ useValue: data });
  return app.bootstrap(appComponentType,[ companiesProvider ]);
}).toPromise();

这是相应的plunkr：https://plnkr.co/edit/ooMNzEw2ptWrumwAX5zP?p=preview.