Question

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

如何将参数传递给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 {
}

Answer 1

更新2

您可以在此处找到

Webpack 实施 Passing server parameters to ngModule with Angular 2 and webpack

Systemjs

更新1：

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

<强> main.ts

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

这样， app.module.ts 中的createAppModule功能是多余的。

<强> Plunker 2.0 Final

以前的版本

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

<强> 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

Answer 2

请参阅以下有关angular2 2.0.1

的解决方法

Loading server side settings before loading components

使用Promise保护您的路线，使用Promise加载配置设置也应该有效。

将appSettings.service与返回promise

的函数一起使用

getAppSettings(): Promise<any> {
        var observable = this.http.get(this.ApiUrl, { headers: this.headers })
            .map((response: Response) => {
                var res = response.json();
                return res;
            });

        observable.subscribe(config => {
        this.config= config;
        console.log(this.config)
        });
        return observable.toPromise();  
    }

CanActivate后卫如下：

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AppSettingsService } from './appsettings.service';

@Injectable()
export class CanActivateViaAuthGuard implements CanActivate {

//router: Router
    constructor(private appSettingsService: AppSettingsService)
    {
    }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
               return this.appSettingsService.getAppSettings().then(() => { 
    return true });
   }
}

这将确保在构造相应组件时您的设置可用。（使用APP_INITIALIZER并没有限制被调用的构造函数，所以我不得不使用这个技术，另外请确保，你不要导出导出中的所有组件：模块中的[]）

为了保护路由并确保在调用构造函数之前加载设置，请使用路径定义路径中常用的canActivate选项

 path: 'abc',
 component: AbcComponent,
 canActivate: [CanActivateViaAuthGuard]

appsettings的初始化应该在调用AbcComponent的构造函数之前发生，这是在Angular 2.0.1中测试并运行的

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

2 个答案: