Question

我是Angular2的新手。我希望有一个单独的类或配置文件具有我可以在所有服务中注入的所有API端点（允许在不同路由中使用参数等）。什么是Angular2中最好的方法。我的意思是，我应该像定义服务时那样定义@Injectable类（然后将其添加到我的服务＆＃39; PROVIDERS）。

我发现的问题是当我将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;
      });
  }

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

Answer 1

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

url.constants.ts

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

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

import { URL1 } from 'url.constants';

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

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

如评论中所述，它变得更容易：https://stackoverflow.com/a/50674344/1195056

更新：

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

例如：

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

这可以像

一样使用

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

Answer 2

如果问题实际上是如何在部署时处理不同的端点前缀而不是在开发时...那么答案是在index.html中使用HTML base 标记，如下所示：< / p>

<!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 3

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

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

您可以按

导入这些变量

import { environment } from 'environments/environment';

此代码。使用如下

environment.baseURL...;

2）关于标题和正文，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',
};

在product.service.ts文件之类的任何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端点的全局常量

4 个答案: