angular - RC5 升级后将服务器参数传递给 ngModule

Question

我再次尝试将参数传递给我的应用程序。从 RC5 开始，我必须使用 ngModule。 (此解决方案:Passing asp.net server parameters to Angular 2 app 自 RC5 起不再有效)

如何给ngModule传递参数？

这里有一个 plunker 来说明问题:<强> Plunker

index.html:

<script>
  System.import('app').then(module =>   module.main('This is RIGHT'),
                console.error.bind(console)
            );
</script>

main.ts:

import { browserDynamicPlatform } from '@angular/platform-browser-dynamic';
import { provide } from '@angular/core';
import { AppModule } from './app.module';

export function main(test: string) {

  browserDynamicPlatform().bootstrapModule(AppModule, [{ providers: provide('Test', { useValue: test, }) }]);
}

应用程序模块.ts

import { NgModule, provide }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { AppComponent }       from './app.component';

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    AppComponent
  ],
  providers: [
    provide('Test', { useValue: 'This is WRONG' })
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

Answer 1

更新 2

Webpack 实现你可以在这里找到 Passing server parameters to ngModule with Angular 2 and webpack

---

系统

更新 1:

我们可以在 browserDynamicPlatform 函数的 extraProviders 属性中传递数据:

ma​​in.ts

export function main(test: string) {
  browserDynamicPlatform([{provide: 'Test', useValue: test }])
    .bootstrapModule(AppModule);
}

这样 app.module.ts 中的 createAppModule 函数是多余的。

Plunker 2.0 Final

---

以前的版本

对于 RC.5，您可以在 app.module.ts 中添加一个方法(即 createAppModule)，如下所示:

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';

export function createAppModule(test) {
  @NgModule({
    imports: [BrowserModule],
    providers: [
      { provide: 'Test', useValue: test },
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
  })
  class AppModule { }

  return AppModule;
}

这样你的主模块会是这样的:

ma​​in.ts

import { browserDynamicPlatform } from '@angular/platform-browser-dynamic';

import { createAppModule } from './app.module';

export function main(test: string) {
  browserDynamicPlatform().bootstrapModule(createAppModule(test));
}

你的出发点保持不变:

index.html

<script>
  System.import('app')
    .then(module => module.main('This is RIGHT'),
       console.error.bind(console)
    );
</script>

这是 Plunker Example