如何將後端渲染的參數傳遞給 Angular 2 Bootstrap 方法？-js教程-PHP中文網

如何將後端渲染的參數傳遞給 Angular 2 Bootstrap 方法？

Barbara Streisand

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

原創

369 人瀏覽過

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提供者

或者，您可以建立自訂BaseRequestOp tions提供者：

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

登入後複製

這種方法提供了一種集中的方式來初始化上下文並延遲應用程式啟動，直到所需的資料可用。