Angular 2 : 为 api 端点定义全局常量

Question

我是 Angular2 的新手。我想要一个 class 或一个包含我所有 API 端点（允许在不同路由中使用参数等）的配置文件，我可以将其注入到我的所有服务中。在 Angular2 中这样做的最佳方法是什么。我的意思是，我是否应该像定义服务时那样定义一个@Injectable class（然后将其添加到我的服务提供者中）。

我发现的问题是，当我将 api 部署在客户端的服务器上时，我必须更改所有以字符串格式调用的端点，这样如果我有很多端点要工作，就会浪费时间与.

在此示例中，我使用字符串格式的端点调用服务：

getData() {
    return this._http.get('http://localhost:8000/cartography')
      .map(function(res) {
        const jsonArray = res.json();
        const newJsonArr = [];
        for ( let i = 0; i < jsonArray.length; i++) {
          const object = {
            post_name : jsonArray[i].name,
            employment_name : jsonArray[i].employment.name,
            profession_name : jsonArray[i].employment.profession.name,
            family_name : jsonArray[i].employment.profession.family.name
          };
          newJsonArr.push(object);
        }
          return newJsonArr;
      });
  }

所以我正在寻找一种方法在 class 或配置文件中将其定义为全局变量。请帮忙！谢谢.

Answer 1

如果问题真的是如何在部署时处理与开发时不同的端点前缀...那么答案是使用 HTML base 标签在你的 index.html 中像这样：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Acme Product Management</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <pm-root></pm-root>
</body>
</html>

然后您可以在部署之前简单地更改此基本标记。如果您使用 Angular CLI，甚至还有一个选项。

来自 CLI 文档：

# Sets base tag href to /myUrl/ in your index.html
ng build --base-href /myUrl/
ng build --bh /myUrl/

如果您真的在寻找更多基于配置文件的方法，请查看：https://github.com/angular/angular/issues/9047#issuecomment-224075188

Answer 2

你可以只拥有一个常量文件。它不是一个特殊的文件，我们可以在任何文件中进行。

url.constants.ts

export const URL1 = "..... " 
export const URL2 = " .... "

然后您可以在代码中的任何位置访问它们

import { URL1 } from 'url.constants';

或者您可以将它们放入 JSON 文件

~~这并不简单。你可以在这里看到它是如何完成的 https://hackernoon.com/import-json-into-typescript-8d465beded79~~

如评论中所述，它变得更容易了：

更新:

将常量放在打字稿文件中的另一个好处是：我们可以使用函数。

例如：

export const USER_NOT_FOUND = (user:string)=> `${user} not found `

这可以像

一样使用

const errorMessage = USER_NOT_FOUND(this.user.name);

Answer 3

我想知道您正在寻找类似 interceptor 或 helper 的内容。和全局变量。

1) 您可以在 environment[.prod].ts 文件中定义全局字符串变量。

您可以通过

导入这些变量

import { environment } from 'environments/environment';

这个code.and使用如下

environment.baseURL...;

2) 关于 header 和 body，还有 http 请求的参数，您可以创建从 HTTP 扩展的新服务。

@Injectable()
export class HttpHelperService {

  constructor(
    private http: Http
  ) { }

  private generateReqOptions(isUrlEncoded = false, requiredAuth = false, customHeader?: Headers , customParam?: Object): RequestOptions {
...
  }

  get(url: string, query: Object, requiredAuth = false, headers?: Headers): Observable<any> {
...
  }

  post(url: string, body: any, isUrlEncoded = false, requiredAuth = false, headers?: Headers): Observable<any> {
...
  }

  private handleError (error: Response | any) {
    ...
  }
}

您可以像这样添加自定义处理函数。

并发出如下http请求。

  constructor(
    private http: HttpHelperService
  ) { }


  getReasons() {
    return this.http.get(...)
      .map(x => x.json())
  }

希望对您有所帮助。

Answer 4

您可以创建一个文件并将其命名为 url.constants.ts 并将此文件放在 /app 文件夹中。

在url.constants.ts中编写如下代码：

export const environment = {
  production: false,
  apiUrl: 'http://localhost:8000',
};

在任何 service.ts 类似 product.service.ts 的文件中，您可以这样称呼它们：

import { environment } from '../url.constants';
console.log(environment.production);
export class ProductService {
private url  = environment.apiUrl;
constructor(private http:HttpClient) {
  if(this.item != null){
    this.token = this.item.token;
  }
}

getProducts(): Observable<any>{
    const url = `${this.url}/api/product`;
    return this.http.get(url,{headers: new HttpHeaders({Authorization:'Bearer '+ this.token})});
}

Angular 2 : 为 api 端点定义全局常量

Angular 2 : Define global constants for api endpoints

api

configuration

web-services

endpoint

angular