如何更改 angular 中的帖子 url

Question

我在 localhost:12334/xyz/abc 然后我想点击帖子 api 端点 localhost:12334/mno/postAction。

注意：我试过 Http client.post('/mno/postAction',{}) 但在 devTools 网络中显示 url 指向 localhost:12334/xyz/api/mno/postAction'

我是 angular 的新手，请帮我准备 url 以点击 postAction

我不想硬编码 localhost:12334 因为它会在生产中发生变化

Answer 1

为此，我们在angular中使用环境变量。

在这个例子中，我有两个部署环境，即生产环境和登台环境。

环境.ts

export const environment = {
  // ...
  apiBaseUrl: 'http://my-local-api-url'
  // ...
};

环境.prod.ts

export const environment = {
  // ...
  apiBaseUrl: 'http://my-production-api-url'
  // ...
};

环境.staging.ts

export const environment = {
  // ...
  apiBaseUrl: 'http://my-staging-api-url'
  // ...
};

现在，您的服务使用该变量

api.service.ts

import { environment } from '../environments/environment';
// ...
export class ProductService {
  apiBaseUrl = environment.apiBaseUrl;

  // ctor
  // ...

  getProducts() : Observable<Products> {
    const url = this.apiBaseUrl+ '/api/products';
    return this.http.get<Products>(url);
  }

}

对于所有这些工作，您必须更改与目标环境匹配的配置选项，我们需要在 angular.json 中配置特定于目标的文件替换。 为此，我们将文件替换添加到 angular.json文件中。

angular.json

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

最后为这样的不同配置调用构建。

ng build --configuration=production // production
ng build --configuration=staging // staging

文档： https://angular.io/guide/build