如何将后端渲染的参数传递给 Angular 2 Bootstrap 方法？

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

在 Angular2 中，引导方法启动应用程序并接受组件以及可选的提供程序数组。本文探讨了如何将从后端获取的参数传递给引导方法。

使用 Angular 的依赖注入

一个简单的解决方案涉及使用 Angular 的依赖注入：

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

// Retrieve headers from the server
var headers = ...;

// Pass headers to bootstrap method using dependency injection
bootstrap(AppComponent, [{provide: 'headers', useValue: headers}]);

在需要标头的组件或服务中，您可以使用 @Inject 注入它们装饰器：

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

使用自定义RequestOptions提供程序

或者，您可以创建自定义BaseRequestOptions提供程序：

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

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

// Pass the custom request options to the bootstrap method
bootstrap(AppComponent, [{provide: BaseRequestOptions, useValue: headers}]);

此方法允许您直接提供修改后的引导方法的请求选项，如果您需要对请求进行更多控制，这会很有用

利用 APP_INITIALIZER

在 Angular 的最新版本（RC.5 及更高版本）中，您可以使用 APP_INITIALIZER 令牌来执行初始化上下文并等待它解析之前的函数应用程序引导程序。

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

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

这种方法提供了一种集中的方式来初始化上下文并延迟应用程序启动，直到所需的数据可用。

结论

通过利用这些技术，您可以将从后端渲染的参数传递到 Angular2 引导方法，从而使您能够注入这些参数在应用程序的初始化阶段将参数传入组件和服务。

以上是如何将后端渲染的参数传递给 Angular 2 Bootstrap 方法？的详细内容。更多信息请关注PHP中文网其他相关文章！