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

Question

我是angular的新手，正在使用服务，并且在本地主机（ http：// localhost：8097 / api / quiz ）上调用其余的API，并且一切正常，现在我想在另一台服务器上部署我的应用程序这是其余的APIurl（ http://192.168.12.36:8097/api/quiz ），所以我的问题是如何根据部署环境动态调用我的其余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