引导时如何将值从 MVC 传递到 Angular 2 (RC.5)答案

【问题标题】：How to pass values from MVC to Angular2 (RC.5) when boostrapping引导时如何将值从 MVC 传递到 Angular 2 (RC.5)
【发布时间】：2016-08-19 08:49:03
【问题描述】：

在引导我的 angular2 应用程序时，我想将一些服务器生成的配置从 MVC 传递到 angular2 应用程序。各种服务都需要该配置。在 angular2 的早期版本中，可以在调用 bootstrap 方法时将配置作为提供程序传递，但是在最新版本中已弃用此方法，取而代之的是 platformBrowserDynamic.bootstrapModule。我注意到 bootstrapModule 方法有一个 compilerOptions 参数，它允许提供提供程序，但这些似乎没有过滤到组件/服务，我正在努力寻找有关该主题的任何文档。

Index.cshtml：

<script src="/lib/es6-shim/es6-shim.min.js"></script>
<script src="/lib/systemjs/dist/system.src.js"></script>
<script src="/lib/rxjs/bundles/Rx.min.js"></script>
<script src="/lib/zone.js/dist/zone.min.js"></script>
<script src="/lib/reflect-metadata/Reflect.js"></script>
<script src="/app/systemjs.config.js"></script>
<script type="text/javascript">
    var appConfig = {
        prop1: '@Model.Prop1',
        prop2: '@Model.Prop2',
        prop3: '@Model.Prop3'
    };
    System.import('/app/main')
        .then(main => main.bootstrap(appConfig), console.error.bind(console));
</script>

Main.ts：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import { AppConfig } from './app-config';

export function bootstrap(appConfig: AppConfig) {
    var compilerOptions = { providers: [{ provide: AppConfig, useValue: appConfig }] };
    platformBrowserDynamic().bootstrapModule(AppModule, compilerOptions);
}

有人可以解释一下如何使用最新的 angular2 版本传递服务器生成的值吗？ (rc.5)

【问题讨论】：

标签： asp.net-mvc angular

【解决方案1】：

我刚刚弄明白了，platformBrowserDynamic 将提供者作为参数，这些提供者确实可以通过所有服务等。

所以 main.ts 变成：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import { AppConfig } from './config-types';

export function bootstrap(appConfig: AppConfig) {
    var providers = [{ provide: AppConfig, useValue: appConfig }];
    platformBrowserDynamic(providers).bootstrapModule(AppModule);
}

希望这对其他人有用！

【讨论】：