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

Question

有没有办法将后端呈现的参数传递给 angular2 引导方法？我想使用BaseRequestOptions 为所有请求设置http 标头，并从后端提供值。我的main.ts 文件如下所示：

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

bootstrap(AppComponent);

我找到了如何将此参数传递给根组件 (https://stackoverflow.com/a/35553650/3455681)，但我在触发 bootstrap 方法时需要它...有什么想法吗？

编辑：

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

Answer 1

更新2

Plunker example

更新 AoT

要与 AoT 合作，需要将工厂关闭

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

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

另见https://github.com/angular/angular/issues/11262

更新 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 */) {...} 
}

提示（循环依赖）

例如注入路由器会导致循环依赖。 要解决此问题，请注入 Injector 并通过

获取依赖项

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 中应该同样有效，但将提供程序添加到根模块的 providers: [...] 而不是 bootstrap(...)

（尚未测试自己）。

更新

这里解释了一种完全在 Angular 内部完成的有趣方法https://github.com/angular/angular/issues/9047#issuecomment-224075188

您可以使用APP_INITIALIZER，它会在 应用程序被初始化并在函数返回时延迟它提供的内容 一个承诺。这意味着应用程序可以在没有完全初始化的情况下进行 很多延迟，你也可以使用现有的服务和框架 功能。

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

在引导程序中：

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

注意：config 只是一个自定义配置类。 rootDomain 将是 '.letterpress.com' 对于这个例子，并允许像 aptaincodeman.letterpress.com.

任何组件和其他服务现在都可以将Site 注入 他们并使用.current 属性，这将是一个具体的 填充对象，无需等待应用程序中的任何承诺。

这种方法似乎减少了启动延迟，否则 如果您正在等待大型 Angular 捆绑包 加载，然后在引导程序开始之前发出另一个 http 请求。

原创

你可以使用 Angulars 依赖注入来传递它：

var headers = ... // get the headers from the server

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

class SomeComponentOrService {
   constructor(@Inject('headers') private headers) {}
}

或提供准备好的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})]);

Answer 2

这样做的唯一方法是在定义您的提供者时提供这些值：

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();

看到这个问题：

• angular2 bootstrap with data from ajax call(s)

编辑

由于您的数据在 HTML 中，您可以使用以下内容。

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

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

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

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

然后你可以像这样从你的 HTML 主页导入它：

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

看到这个问题：Pass Constant Values to Angular from _layout.cshtml。

Answer 3

在 Angular2 最终版本中，可以使用 APP_INITIALIZER 提供程序来实现您想要的。

我写了一个带有完整示例的 Gist：https://gist.github.com/fernandohu/122e88c3bcd210bbe41c608c36306db9

要点示例是从 JSON 文件读取，但可以轻松更改为从 REST 端点读取。

你需要的，基本上是：

a) 在您现有的模块文件中设置 APP_INITIALIZER：

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

这些行将在您的应用程序启动之前从 BackendRequestClass 类调用 load() 方法。

如果您想使用 angular2 内置库对后端进行 http 调用，请确保在“imports”部分设置“HttpModule”。

b) 创建一个类并将文件命名为“backend.request.ts”：

import { Inject, Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class BackendRequestClass {

    private result: Object = null;

    constructor(private http: Http) {

    }

    public getResult() {
        return this.result;
    }

    public load() {
        return new Promise((resolve, reject) => {
            this.http.get('http://address/of/your/backend/endpoint').map( res => res.json() ).catch((error: any):any => {
                reject(false);
                return Observable.throw(error.json().error || 'Server error');
            }).subscribe( (callResult) => {
                this.result = callResult;
                resolve(true);
            });

        });
    }
}

c) 要读取后端调用的内容，您只需将 BackendRequestClass 注入您选择的任何类并调用 getResult()。示例：

import { BackendRequestClass } from './backend.request';

export class AnyClass {
    constructor(private backendRequest: BackendRequestClass) {
        // note that BackendRequestClass is injected into a private property of AnyClass
    }

    anyMethod() {
        this.backendRequest.getResult(); // This should return the data you want
    }
}

如果这能解决您的问题，请告诉我。

Answer 4

您可以创建并导出一个完成工作的函数，而不是让您的入口点调用引导程序本身：

export function doBootstrap(data: any) {
    platformBrowserDynamic([{provide: Params, useValue: new Params(data)}])
        .bootstrapModule(AppModule)
        .catch(err => console.error(err));
}

您也可以将此函数放在全局对象上，具体取决于您的设置（webpack/SystemJS）。它也与 AOT 兼容。

这有一个额外的好处，可以在有意义的时候延迟引导。例如，当您在用户填写表单后以 AJAX 调用的形式检索此用户数据时。只需使用此数据调用导出的引导函数即可。