RC5升级后将服务器参数传递给ngModule [英] Passing server parameters to ngModule after RC5 upgrade

问题描述

我再次尝试将参数传递给我的应用程序.从RC5开始，我必须使用ngModule. (此解决方案:将asp.net服务器参数传递给Angular 2应用从RC5开始不再有效)

I'm trying again to pass parameters to my application. Since RC5, I have to use ngModule. (this solution: Passing asp.net server parameters to Angular 2 app no longer works since RC5)

如何将参数传递给ngModule?

How to pass parameters to ngModule?

这里有个小问题来说明问题: 柱塞

Here's a plunker to illustrate problem: Plunker

index.html:

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

app.module.ts

app.module.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 {
}

推荐答案

更新2

Webpack 实现，您可以在此处找到 使用Angular 2将服务器参数传递给ngModule和webpack

Webpack implementation you can find here Passing server parameters to ngModule with Angular 2 and webpack

Systemjs

更新1:

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

We can pass data in the extraProviders property of browserDynamicPlatform function:

main.ts

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

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

This way the createAppModule function in app.module.ts is redundant.

Plunker 2.0 Final

Plunker 2.0 Final

以前的版本

对于RC.5，您可以像这样在app.module.ts中添加方法(即createAppModule):

For RC.5 you can add a method (i.e. createAppModule) in app.module.ts like this:

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

这样，您的主模块将如下所示:

This way your main module would be like this:

main.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>

这是 柱塞示例

Here is Plunker Example

这篇关于RC5升级后将服务器参数传递给ngModule的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！