如何在Angular項目中使用環境變量動態設置API基礎URL

在Angular項目中，可以通過環境變量來動態設置API基礎URL。以下是一種常見的方法：

1. 在src目錄下創建一個environments文件夾，并在里面創建不同的環境配置文件，比如environment.prod.ts和environment.ts。

2. 在每個環境配置文件中定義一個apiBaseUrl變量，并分別設置不同的值，例如：

// environment.ts
export const environment = {
  production: false,
  apiBaseUrl: 'http://localhost:3000/api'
};

// environment.prod.ts
export const environment = {
  production: true,
  apiBaseUrl: 'https://production-api-url.com/api'
};

3. 在angular.json中配置使用哪個環境配置文件。找到projects -> [project-name] -> architect -> build -> configurations，并添加對應的環境配置文件，例如：

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  }
}

4. 在需要使用API基礎URL的服務中引入環境變量，并使用environment.apiBaseUrl來獲取值，例如：

import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  baseUrl: string = environment.apiBaseUrl;

  constructor() { }

  get(url: string) {
    return this.http.get(`${this.baseUrl}/${url}`);
  }
}

這樣就可以根據不同的環境動態設置API基礎URL了。在開發時，使用environment.ts中定義的URL，在生產環境中使用environment.prod.ts中定義的URL。