angular2引导与来自AJAX调用数据（S） [英] angular2 bootstrap with data from ajax call(s)

问题描述

我想我的引导数据，我从服务检索应用程序。我在做沿着

I want to bootstrap my application with data I am retrieving from a service. I am doing something along the lines of

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)
    });

这工作得很好，但我不喜欢使用的依赖阵列的两倍，是有这样做的更清洁的方式？我可以添加的东西引导应用后注入？此外，我注意到，引导函数返回一个承诺，我可以用这个承诺，应用程序的prevent引导，直到我的Ajax请求完成后？

This works fine, but I do not like using the dependency array twice, is there a cleaner way of doing this? Can I add things to the application injector after bootstrap? Also I notice that the bootstrap function returns a promise, can I use this promise to prevent bootstrap of the application until after my ajax request finishes?

路线为喷油器我可以只使用为MyService 需要这些依赖但是这使得它很脆为你可以想象。

Of course for the Injector I could use only those dependencies required by MyService but this makes it very brittle as you can imagine.

推荐答案

这里的问题是，Angular2不给你访问该应用程序的参考和自举它的主要成分前的注射器。请查看源代码code此行：的https://github.com/angular/angular/blob/master/modules/angular2/platform/browser.ts#L110.

The problem here is that Angular2 doesn't give you access to the application reference and its injector before bootstrapping the main component on it. See this line in the source code: https://github.com/angular/angular/blob/master/modules/angular2/platform/browser.ts#L110.

这是方法可以实现自定义的引导而不是使用默认之一。类似的东西了拆分应用程序的创建和它的应用程序组件上的boostrapping。这样，你就可以加载这两个任务之间的事情。

An approach could be to implement a custom bootstrap instead of using the default one. Something like that that splits the application creation and the boostrapping on the application component on it. This way you will be able to load something between the two tasks.

下面是一个示例实现：

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
]);

公司会自动可用于注入例如组件内：

Companies will be automatically available for injection within the component for example:

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

看到这个相应plunkr： https://plnkr.co/edit/RbBrQ7KOMoFVNU2ZG5jM？ p = preVIEW 。

在这个时候，这是一个有点哈克但这种做法可能提出为特征的请求......

At this time, it's a bit hacky but such approach could proposed as a feature request...

这篇关于angular2引导与来自AJAX调用数据（S）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！