如何在 Angular 中根据部署环境调用 API url

Question

我是 angular 的新手，我正在使用服务，我正在本地主机 (http://localhost:8097/api/quiz( 中调用我的 REST API并且一切正常，现在我想在另一台服务器上部署我的应用程序，这是 rest APIurl (http://192.168.12.36:8097/api/quiz(，所以我的问题是如何根据部署环境动态调用我的 rest API，这是我在我的服务中使用的代码：

export class QuizService {
readonly rootUrl='http://localhost:8097/api/quiz';
  constructor(private httpClient : HttpClient) { }
  getQuestions(){
    return this.httpClient.get(this.rootUrl+'/randomquestions');
  }
}

提前谢谢。

Answer 1

您可以

设置environment并为不同的environment构建相同的应用程序：

environment.ts ：

export const environment = {
  production: false,
  api: 'http://localhost:8097'
};

environment.prod.ts ：

export const environment = {
  production: true,
  api: 'http://192.168.12.36:8097'
};

QuizService.ts ：

export class QuizService {
readonly rootUrl= envirment.api + '/api/quiz';
  constructor(private httpClient : HttpClient) { }
  getQuestions(){
    return this.httpClient.get(this.rootUrl+'/randomquestions');
  }
}

官方文件：https://angular.io/guide/build