Angular 應用裡 server.ts 檔案，下面這段程式碼的含義？

```typescript
server.get('*', (req, res) => {
    res.render(indexHtml, {
      req,
      providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }],
    });
  });
```

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/8ab2e29f3e7443b99541f34dc74ed000.png#pic_center)

在 Angular 應用中，server.ts 檔案是用於構建伺服器端渲染（Server-side rendering，簡稱 SSR）的入口檔案。該檔案中的程式碼通常使用 Node.js 的 http 模組建立一個 HTTP 伺服器，用於處理客戶端請求。

在這段程式碼中，server.get('*', ...) 表示當 HTTP 伺服器收到任何請求時都會執行下面的回撥函式。其中，res.render() 方法用於渲染 HTML 頁面，並將其作為響應傳送給客戶端。這裡的 indexHtml 是一個字串，它是應用程式的 HTML 入口檔案，在服務端渲染時需要將其填充為完整的 HTML 頁面。可以透過 Node.js 的檔案系統模組或者其他方式載入 HTML 入口檔案。

res.render() 方法的第二個引數是一個物件，用於向 HTML 頁面注入資料。在這個例子中，我們向 indexHtml 中注入了兩個屬性：

- req：表示當前請求的上下文資訊，包括請求的 URL、HTTP 頭、HTTP 方法等。
- providers：是一個陣列，用於向 Angular 應用程式的 DI（Dependency Injection，依賴注入）系統中注入資料。在這個例子中，我們向 DI 系統中注入了一個 APP_BASE_HREF 的提供者，用於指定應用程式的根路徑。req.baseUrl 表示當前請求的路徑，它會作為 APP_BASE_HREF 的值被注入到 DI 系統中，從而在應用程式中可以使用 APP_BASE_HREF 依賴注入來獲取當前請求的根路徑。
需要注意的是，這段程式碼只是 server.ts 檔案中的一部分，還需要在其他地方（例如在 main.ts 中）定義 APP_BASE_HREF 的提供者。這樣才能在客戶端和服務端都正確地使用 APP_BASE_HREF 依賴注入。

APP_BASE_HREF 是一個 Angular 應用中用於指定應用程式根路徑的常量。它通常用於在應用程式中構建 URL，例如生成導航連結或者載入資原始檔。

在瀏覽器端，APP_BASE_HREF 的預設值為 /，即應用程式根路徑為域名或者子路徑。例如，如果應用程式的 URL 是 http://example.com/my-app/，那麼應用程式的根路徑就是 /my-app/。在這種情況下，APP_BASE_HREF 的預設值就是 /my-app/。

在伺服器端渲染（Server-side rendering，簡稱 SSR）時，APP_BASE_HREF 的值可能需要根據當前請求的路徑動態設定。例如，如果當前請求的路徑為 /my-app/foo/bar，那麼應用程式的根路徑應該是 /my-app/，而不是 /。在這種情況下，需要將 APP_BASE_HREF 的值設定為當前請求的路徑，可以透過 Node.js 的 req.baseUrl 屬性獲取當前請求的路徑，例如：

```typescript
const { APP_BASE_HREF } = require('@angular/common');
// ...
app.get('*', (req, res) => {
  const providers = [
    { provide: APP_BASE_HREF, useValue: req.baseUrl }
  ];
  // ...
});

```

在應用程式中，可以使用 APP_BASE_HREF 常量來構建 URL，例如：

```typescript
import { APP_BASE_HREF } from '@angular/common';

// ...

@Component({ /* ... */ })
export class MyComponent {
  constructor(@Inject(APP_BASE_HREF) private readonly baseHref: string) {}

getMyUrl() {
    // 構建基於根路徑的 URL
    return `${this.baseHref}/my-url`;
  }
}

```
在這個例子中，MyComponent 的建構函式中透過依賴注入獲取了 APP_BASE_HREF 的值，然後使用它來構建 URL。

Angular 應用裡 server.ts 檔案的 APP_BASE_HREF token 的用法？

相關文章