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

73

有没有办法将后端呈现的参数传递给angular2 bootstrap方法？我想使用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'
      }
    ]
  }
};
javascript  angular 
— 博齐奥
source

Answers:

95

更新2

柱塞示例

更新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 { }

如果不需要等待初始化完成，也可以使用类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(...)

（尚未测试自己）。

更新

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

您可以使用APP_INITIALIZER它将在应用程序初始化时执行功能，并在该功能返回promise时延迟提供的功能。这意味着该应用程序可以在没有太多延迟的情况下进行初始化，并且您还可以使用现有的服务和框架功能。

例如，假设您有一个多租户解决方案，其中站点信息依赖于从其提供服务的域名。这可以是[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})]);
— 贡特·佐赫鲍尔（GünterZöchbauer）
source
2
因此，您想从HTML阅读。您可以在服务器上添加一个脚本标签，将它们分配给某些全局变量<script> function() { window.headers = someJson; }()</script>。不确定语法，我自己不太使用JS。这样，您根本就不必解析。
— 君特Zöchbauer
4
出色的解决方案，对于像我这样的未来Google员工，请注意以下几点：1）请注意load()必须返回Promise，而不是Observable。.toPromise()如果您像我一样在服务中使用Observables，请在此处使用该函数。2）您可能想知道如何将值sites.load()检索到服务，组件等中。请注意SitesService将其分配给this.current。因此，您只需要注入SitesService您的组件并检索其current属性
— Jared Phelps
2
但是，当我重新构建项目时，很好的解决方案出现了以下错误：“错误中的错误遇到了静态解析符号值的问题。不支持函数调用。请考虑使用对导出函数的引用替换函数或lambda（在代码中位置24:46原始.ts文件），在... / src / app / app.module.ts中解析符号AppModule”。我相信它指向useFactory中的lambda表达式。您如何将上述lambda转换为导出的函数？函数只是充当包装器吗？
— HGPB
2
随着AOT你需要移动() => sites.load()到一个函数（类和装饰外），然后在供应商通过函数名替换它
— 君特Zöchbauer
2
@GünterZöchbauer谢谢，我按照您的建议尝试了，但是遇到了同样的错误。但是也许我也没有关注。您能看看我的问题
— 吗
30

在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调用，请确保在“导入”部分中设置了“ 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
    }
}

让我知道这是否可以解决您的问题。

— 电脑
source
2
在Angular 2.3.0中，我收到一个错误：“未处理的承诺拒绝：appInits [i]不是函数；区域：<root>；任务：Promise.then；值：TypeError：appInits [i]不是function（…）TypeError：appInits [i]在MyModuleInjector处的新ApplicationInitStatus（在<anonymous>（localhost：8080 / js / vendor.js：89：2），<anonymous>：3751：49）处不是函数。 createInternal（/MyModule/module.ngfactory.js:454:36）-看来负载返回的承诺也不能由useFactory函数返回
— IanT8
@ IanT8请注意，工厂函数不会返回函数，而是会返回返回promise的函数。这是导致appInits [i]错误的原因。
— Jared Phelps
我得到了完全相同的错误。通过添加额外() =>的useFactory
— Stephen Paul
尝试在angular4中执行相同的步骤，但是不起作用，没有错误，并且没有数据显示在视图上
— Shubham Tiwari
8

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

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

您还可以根据您的设置（webpack / SystemJS）将此函数放在全局对象上。它还与AOT兼容。

在有意义的情况下，这样做还有一个额外的好处，可以延迟启动。例如，当您填写用户表单后，当您通过AJAX调用检索该用户数据时。只需使用此数据调用导出的引导程序函数即可。

— 安德烈·韦朗
source
那么如何在AppModule中访问此传递的“数据”呢？
— Ajey
@Ajey注入PARAMS任何注射元件上
— 安德烈Werlang
就我而言，这是更好的选择。我想通过页面上的另一个事件来手动启动应用程序的加载，因此效果很好
— SlimSim
1

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

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主页中将其导入，如下所示：

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

看到这个问题：从_layout.cshtml将常量值传递给Angular。

— 蒂埃里·坦佩利（Thierry Templier）
source
但是如何将这些参数渲染为打字稿文件呢？还是应该将此引导方法运行到页面上的内联脚本中？但是，使用es6导入时该怎么做？
— Bodzio
渲染到底是什么意思？您是否从服务器生成主HTML文件/ JS文件？您是否执行AJAX请求以获取这些参数？
— Thierry Templier，2013年
我从服务器生成视图。我以为我会在后端这样渲染所有必要的参数：{"token": "@User.Token", "xxx": "@User.Yyy"}因此在渲染的HTML中我将拥有{"token": "123abc456def", "xxx": "yyy"}。我想以某种方式将此呈现的JSON传递到我在.js文件中拥有的bootstrap方法中。
— Bodzio
有没有一种方法可以在不使用SystemJS的情况下运行它（我正在使用webpack，并且入口点在webpack.config文件中定义）
— Bodzio
我不是webpack专家，但我可以尝试...您可以添加webpack.config文件的内容吗？谢谢！
— Thierry Templier，2016年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.