如何将后端渲染的参数传递给 Angular 2 Bootstrap 方法？-js教程-PHP中文网

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

Barbara Streisand

发布： 2024-12-05 11:39:14

原创

370 人浏览过

How Can I Pass Backend-Rendered Parameters to the Angular 2 Bootstrap Method?

如何将从后端渲染的参数传递到 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 } ],
})

登录后复制

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