バックエンドでレンダリングされたパラメーターを Angular 2 ブートストラップメソッドに渡すにはどうすればよいですか?-jsチュートリアル-php.cn

バックエンドでレンダリングされたパラメーターを Angular 2 ブートストラップメソッドに渡すにはどうすればよいですか?

Barbara Streisand

リリース： 2024-12-05 11:39:14

オリジナル

368 人が閲覧しました

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

ログイン後にコピー

このアプローチは、初期化を集中的に行う方法を提供します。