Question

我是angular的新手，我正在使用服务，并且在本地主机（http://localhost:8097/api/quiz）中调用我的其余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

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

1 个答案: