角度 – 在RC5升级后将服务器参数传递给ngModule

发布时间：2020-12-17 09:29:35 所属栏目：安全来源：网络整理

导读：我再次尝试将参数传递给我的应用程序.由于RC5,我必须使用ngModule. (此解决方案：自RC5以来,Passing asp.net server parameters to Angular 2 app不再工作) 如何传递参数到ngModule？这是一个说明问题的空白： Plunker index.html的： script System.import

我再次尝试将参数传递给我的应用程序.由于RC5,我必须使用ngModule. (此解决方案：自RC5以来,Passing asp.net server parameters to Angular 2 app不再工作)

如何传递参数到ngModule？

这是一个说明问题的空白：
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,}) }]);
}

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实现你可以在这里找到
Passing server parameters to ngModule with Angular 2 and webpack

Systemjs

更新1：

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

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

这样你的主要模块就是这样的：

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>

这是Plunker Example

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!