Javascript 如何将从后端渲染的参数传递到angular2引导方法

有没有办法将后端呈现的参数传递给angular2引导方法？我想使用从后端提供的值为所有请求设置http头。我的

main.ts

文件如下所示：

import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from "./app.component.ts";

bootstrap(AppComponent);

<script>
  var params = {"token": "@User.Token", "xxx": "@User.Yyy"};
  System.import('app/main').then((module) => {
    module.main(params);
  });
</script>

我找到了如何将此参数传递给根组件（），但在激发

bootstrap

method时需要它。。。有什么想法吗

编辑：

webpack.config.js内容：

module.exports = {
  entry: {
    app: "./Scripts/app/main.ts"
  },

  output: {
    filename: "./Scripts/build/[name].js"
  },

  resolve: {
    extensions: ["", ".ts", ".js"]
  },

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'ts-loader'
      }
    ]
  }
};

---

更新2

更新AoT

为了与AoT合作，工厂关闭需要移出

function loadContext(context: ContextService) {
  return () => context.load();
}

@NgModule({
  ...
  providers: [ ..., ContextService, { provide: APP_INITIALIZER, useFactory: loadContext, deps: [ContextService], multi: true } ],

另见

更新RC.6和2.0.0最终示例

function configServiceFactory (config: ConfigService) {
  return () => config.load();
}

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule,
        routes,
        FormsModule,
        HttpModule],
    providers: [AuthService,
        Title,
        appRoutingProviders,
        ConfigService,
        { provide: APP_INITIALIZER,
          useFactory: configServiceFactory
          deps: [ConfigService], 
          multi: true }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

如果不需要等待初始化完成，也可以使用`class AppModule{}的构造函数：

class AppModule {
  constructor(/*inject required dependencies */) {...} 
}

提示（循环依赖）

例如，注入路由器可能导致循环依赖。 要解决此问题，请注入

注入器

，然后通过

this.myDep = injector.get(MyDependency);

而不是直接注入

MyDependency

，如：

@Injectable()
export class ConfigService {
  private router:Router;
  constructor(/*private router:Router*/ injector:Injector) {
    setTimeout(() => this.router = injector.get(Router));
  }
}

更新

这在RC.5中应该同样适用，但将提供程序添加到根模块的

提供程序：[……]

，而不是

引导（…）

（我还没有测试过自己）

更新

这里解释了一种完全在角度内完成的有趣方法

您可以使用

APP\u初始值设定项

，当 应用程序已初始化，如果函数返回，则延迟它提供的内容 承诺。这意味着该应用程序可以在不进行任何初始化的情况下进行初始化 您还可以使用现有的服务和框架 特征

例如，假设您有一个多租户解决方案，其中 站点信息依赖于提供服务的域名。这个可以 可以是[name].letterpress.com或在上匹配的自定义域 完整主机名。我们可以通过以下方式隐藏这一事实：这是一项承诺的背后 使用

APP\u初始值设定项

在引导中：

{provide: APP_INITIALIZER, useFactory: (sites:SitesService) => () => sites.load(), deps:[SitesService, HTTP_PROVIDERS], multi: true}),

sites.service.ts：

@Injectable()
export class SitesService {
  public current:Site;

  constructor(private http:Http, private config:Config) { }

  load():Promise<Site> {
    var url:string;
    var pos = location.hostname.lastIndexOf(this.config.rootDomain);
    var url = (pos === -1)
      ? this.config.apiEndpoint + '/sites?host=' + location.hostname
      : this.config.apiEndpoint + '/sites/' + location.hostname.substr(0, pos);
    var promise = this.http.get(url).map(res => res.json()).toPromise();
    promise.then(site => this.current = site);
    return promise;
  }

或者直接提供准备好的

BaseRequestOptions

，就像

class MyRequestOptions extends BaseRequestOptions {
  constructor (private headers) {
    super();
  }
} 

var values = ... // get the headers from the server
var headers = new MyRequestOptions(values);

bootstrap(AppComponent, [{provide: BaseRequestOptions, useValue: headers})]);

---

更新2

更新AoT

为了与AoT合作，工厂关闭需要移出

function loadContext(context: ContextService) {
  return () => context.load();
}

@NgModule({
  ...
  providers: [ ..., ContextService, { provide: APP_INITIALIZER, useFactory: loadContext, deps: [ContextService], multi: true } ],

另见

更新RC.6和2.0.0最终示例

function configServiceFactory (config: ConfigService) {
  return () => config.load();
}

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule,
        routes,
        FormsModule,
        HttpModule],
    providers: [AuthService,
        Title,
        appRoutingProviders,
        ConfigService,
        { provide: APP_INITIALIZER,
          useFactory: configServiceFactory
          deps: [ConfigService], 
          multi: true }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

如果不需要等待初始化完成，也可以使用`class AppModule{}的构造函数：

class AppModule {
  constructor(/*inject required dependencies */) {...} 
}

提示（循环依赖）

例如，注入路由器可能导致循环依赖。 要解决此问题，请注入

注入器

，然后通过

this.myDep = injector.get(MyDependency);

而不是直接注入

MyDependency

，如：

@Injectable()
export class ConfigService {
  private router:Router;
  constructor(/*private router:Router*/ injector:Injector) {
    setTimeout(() => this.router = injector.get(Router));
  }
}

更新

这在RC.5中应该同样适用，但将提供程序添加到根模块的

提供程序：[……]

，而不是

引导（…）

（我还没有测试过自己）

更新

这里解释了一种完全在角度内完成的有趣方法

您可以使用

APP\u初始值设定项

，当 应用程序已初始化，如果函数返回，则延迟它提供的内容 承诺。这意味着该应用程序可以在不进行任何初始化的情况下进行初始化 您还可以使用现有的服务和框架 特征

例如，假设您有一个多租户解决方案，其中 站点信息依赖于提供服务的域名。这个可以 可以是[name].letterpress.com或在上匹配的自定义域 完整主机名。我们可以通过以下方式隐藏这一事实：这是一项承诺的背后 使用

APP\u初始值设定项

在引导中：

{provide: APP_INITIALIZER, useFactory: (sites:SitesService) => () => sites.load(), deps:[SitesService, HTTP_PROVIDERS], multi: true}),

sites.service.ts：

@Injectable()
export class SitesService {
  public current:Site;

  constructor(private http:Http, private config:Config) { }

  load():Promise<Site> {
    var url:string;
    var pos = location.hostname.lastIndexOf(this.config.rootDomain);
    var url = (pos === -1)
      ? this.config.apiEndpoint + '/sites?host=' + location.hostname
      : this.config.apiEndpoint + '/sites/' + location.hostname.substr(0, pos);
    var promise = this.http.get(url).map(res => res.json()).toPromise();
    promise.then(site => this.current = site);
    return promise;
  }

或者直接提供准备好的

BaseRequestOptions

，就像

class MyRequestOptions extends BaseRequestOptions {
  constructor (private headers) {
    super();
  }
} 

var values = ... // get the headers from the server
var headers = new MyRequestOptions(values);

bootstrap(AppComponent, [{provide: BaseRequestOptions, useValue: headers})]);

---

唯一的方法是在定义提供者时提供以下值：

bootstrap(AppComponent, [
  provide(RequestOptions, { useFactory: () => {
    return new CustomRequestOptions(/* parameters here */);
  });
]);

然后，您可以在

CustomRequestOptions

类中使用这些参数：

export class AppRequestOptions extends BaseRequestOptions {
  constructor(parameters) {
    this.parameters = parameters;
  }
}

如果从AJAX请求中获取这些参数，则需要通过以下方式异步引导：

var appProviders = [ HTTP_PROVIDERS ]

var app = platform(BROWSER_PROVIDERS)
  .application([BROWSER_APP_PROVIDERS, appProviders]);

var http = app.injector.get(Http);
http.get('http://.../some path').flatMap((parameters) => {
  return app.bootstrap(appComponentType, [
    provide(RequestOptions, { useFactory: () => {
      return new CustomRequestOptions(/* parameters here */);
    }})
  ]);
}).toPromise();

见这个问题：

编辑

由于您的数据是HTML格式的，因此可以使用以下内容

您可以导入函数并使用参数调用它

以下是引导应用程序的主模块示例：

import {bootstrap} from '...';
import {provide} from '...';
import {AppComponent} from '...';

export function main(params) {
  bootstrap(AppComponent, [
    provide(RequestOptions, { useFactory: () => {
      return new CustomRequestOptions(params);
    });
  ]);
}

然后，您可以从HTML主页导入它，如下所示：

import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from "./app.component.ts";

bootstrap(AppComponent);

<script>
  var params = {"token": "@User.Token", "xxx": "@User.Yyy"};
  System.import('app/main').then((module) => {
    module.main(params);
  });
</script>

var params={“token”：“@User.token”，“xxx”：“@User.Yyy”}；
System.import（'app/main'）。然后（（模块）=>{
主模块（参数）；
});

---

请参阅此问题：。

唯一的方法是在定义提供者时提供以下值：

bootstrap(AppComponent, [
  provide(RequestOptions, { useFactory: () => {
    return new CustomRequestOptions(/* parameters here */);
  });
]);

然后，您可以在

CustomRequestOptions

类中使用这些参数：

export class AppRequestOptions extends BaseRequestOptions {
  constructor(parameters) {
    this.parameters = parameters;
  }
}

如果从AJAX请求中获取这些参数，则需要通过以下方式异步引导：

var appProviders = [ HTTP_PROVIDERS ]

var app = platform(BROWSER_PROVIDERS)
  .application([BROWSER_APP_PROVIDERS, appProviders]);

var http = app.injector.get(Http);
http.get('http://.../some path').flatMap((parameters) => {
  return app.bootstrap(appComponentType, [
    provide(RequestOptions, { useFactory: () => {
      return new CustomRequestOptions(/* parameters here */);
    }})
  ]);
}).toPromise();

见这个问题：

编辑

由于您的数据是HTML格式的，因此可以使用以下内容

您可以导入函数并使用参数调用它

以下是引导应用程序的主模块示例：

import {bootstrap} from '...';
import {provide} from '...';
import {AppComponent} from '...';

export function main(params) {
  bootstrap(AppComponent, [
    provide(RequestOptions, { useFactory: () => {
      return new CustomRequestOptions(params);
    });
  ]);
}

然后，您可以从HTML主页导入它，如下所示：

import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from "./app.component.ts";

bootstrap(AppComponent);

<script>
  var params = {"token": "@User.Token", "xxx": "@User.Yyy"};
  System.import('app/main').then((module) => {
    module.main(params);
  });
</script>

var params={“token”：“@User.token”，“xxx”：“@User.Yyy”}；
System.import（'app/main'）。然后（（模块）=>{
主模块（参数）；
});

---

请参阅此问题：.

在Angular2最终版本中，可以使用APP\u初始值设定项提供程序实现您想要的功能

我用一个完整的例子写了一个要点：

gist示例是从JSON文件读取，但是可以很容易地更改为从REST端点读取

您需要的基本上是：

a） 在现有模块文件中设置APP_初始值设定项：

import { APP_INITIALIZER } from '@angular/core';
import { BackendRequestClass } from './backend.request';
import { HttpModule } from '@angular/http';

...

@NgModule({
    imports: [
        ...
        HttpModule
    ],
    ...
    providers: [
        ...
        ...
        BackendRequestClass,
        { provide: APP_INITIALIZER, useFactory: (config: BackendRequestClass) => () => config.load(), deps: [BackendRequestClass], multi: true }
    ],
    ...
});

这些行将从Backen调用load（）方法