如何在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。