Angular 伺服器端渲染兩個相關的 SERVER_REQUEST_URL 和 SERVER_REQUEST_ORIGIN

JerryWang_汪子熙發表於2023-05-15
Angular伺服器Server

下面這段程式碼有什麼用？

export class AppModule {
  constructor(
    @Optional() @Inject(SERVER_REQUEST_URL) protected serverRequestUrl?: string,
    @Optional() @Inject(SERVER_REQUEST_ORIGIN) protected serverRequestOrigin?: string
  ) {
    console.log({ serverRequestUrl, serverRequestOrigin });
  }
}

SERVER_REQUEST_URL 和 SERVER_REQUEST_ORIGIN 這兩個 injection token 在實際的 Angular 專案中有什麼用？

這段程式碼定義了一個名為 AppModule 的 Angular 模組，並在其建構函式中注入了兩個依賴項（依賴注入）：SERVER_REQUEST_URL 和 SERVER_REQUEST_ORIGIN。

依賴注入是一種常見的設計模式，用於管理元件、服務、模組等之間的依賴關係。在 Angular 中，依賴注入透過注入令牌（Injection Token）來實現。

在這段程式碼中，@Inject() 裝飾器用於指定注入令牌，@Optional() 裝飾器用於標記這兩個依賴項是可選的，即如果找不到對應的提供者，程式也不會報錯。建構函式中的 console.log() 語句用於在控制檯輸出這兩個依賴項的值，以便在開發過程中進行除錯和測試。

在實際的 Angular 專案中，SERVER_REQUEST_URL 和 SERVER_REQUEST_ORIGIN 這兩個注入令牌通常用於處理伺服器端渲染（server-side rendering）相關的邏輯。SERVER_REQUEST_URL 用於獲取當前請求的 URL 地址，SERVER_REQUEST_ORIGIN 用於獲取請求的源地址。透過這些注入令牌，我們可以在元件、服務等中獲取當前請求的相關資訊，以便進行更靈活的業務邏輯處理。

在實際的 Angular 專案中，可以透過在模組的 providers 中提供對應的值來註冊 SERVER_REQUEST_URL 和 SERVER_REQUEST_ORIGIN 這兩個注入令牌。下面是一個示例：

import { InjectionToken } from '@angular/core';

export const SERVER_REQUEST_URL = new InjectionToken<string>('SERVER_REQUEST_URL');
export const SERVER_REQUEST_ORIGIN = new InjectionToken<string>('SERVER_REQUEST_ORIGIN');

@NgModule({
  // ...
  providers: [
    { provide: SERVER_REQUEST_URL, useValue: 'http://example.com/api' },
    { provide: SERVER_REQUEST_ORIGIN, useValue: 'http://example.com' },
  ]
})
export class AppModule { }

在上面的示例中，我們透過 providers 屬性提供了 SERVER_REQUEST_URL 和 SERVER_REQUEST_ORIGIN 的值。假設我們在一個元件中注入了這兩個令牌，並列印出它們的值，程式碼如下：

import { Component, Inject } from '@angular/core';
import { SERVER_REQUEST_URL, SERVER_REQUEST_ORIGIN } from './app.module';

@Component({
  selector: 'app-root',
  template: `SERVER_REQUEST_URL: {{ serverRequestUrl }}<br>SERVER_REQUEST_ORIGIN: {{ serverRequestOrigin }}`
})
export class AppComponent {
  constructor(
    @Inject(SERVER_REQUEST_URL) public serverRequestUrl: string,
    @Inject(SERVER_REQUEST_ORIGIN) public serverRequestOrigin: string
  ) { }
}

當應用程式執行時，如果我們在控制檯中檢視元件輸出的值，可能會看到類似如下的內容：

SERVER_REQUEST_URL: http://example.com/api
SERVER_REQUEST_ORIGIN: http://example.com

這表明 SERVER_REQUEST_URL 和 SERVER_REQUEST_ORIGIN 的值已成功注入，並且元件已經正確地獲取了這些值。

相關文章