Question

使用我的第一个Angular应用程序。

我的所有服务都将与同一服务器上的Web服务进行通信。我希望每个服务都使用公共代码来执行此通信，以允许服务在业务逻辑上进行通信。例如，我想要对服务器名称进行一次编码。

我在其他平台上完成此操作的方法是在其上创建一个包含这些方法的静态类，然后从我的服务中调用这些方法。我如何使用Angular 5实现这一点，因为我只知道模板，组件和服务？

Answer 1

一种非常常见的方法是使用一个名为config.ts的文件，其对象APP_CONFIG可以存储您可能需要的任何属性。然后，您只需导入配置对象并使用所需的属性。

<强>更新

您还可以使用@Inject装饰器将字符串和对象注入服务（您还必须先提供它们）：

您的服务：

@Injectable()
export class DataService {
    constructor(@Inject(API_BASE_URL) baseUrl?: string) { // ... }
}

您的appConfig.module.ts：

import {NgModule} from '@angular/core';
import {API_BASE_URL} from 'some/path';

@NgModule({
    providers: [
        {
            provide: API_BASE_URL,
            useValue: 'https://example.com'
        }
    ]
})

export class AppConfigModule {
}

通过这种方式，您可以使用DI模拟此依赖项以进行测试。

Answer 2

我在之前的项目中为此做了如下的事情。我创建了一个包含以下内容的config.ts文件。

<强> config.ts

export const config = Object.freeze({
    server: 'http://localhost/',
    folder: 'angular5/'
});

然后我将此文件导入到进行Http调用的服务中。使用它如下：

import { config } from './../shared/config/config';

private server = config.server + config.folder;
private contactUsURL = this.server + '/api/contact-us';

您可以使用它来完成Http调用的实际URL。我希望通过这种方式您可以创建＆amp;轻松地在项目中使用常用常量。

Answer 3

ng生成类常量

您的班级应该像这样：

import {Injectable} from '@angular/core';

@Injectable()
export class Constants {

  public static readonly API_URL = 'api';

  static Role = class {
    public static readonly ADMIN = 'ROLE_ADMIN';
  };
}

在组件中使用：

import {Constants} from '../constants';

...

console.log(Constants.Role.ADMIN);
console.log(Constants.API_URL);

Answer 4

我创建了一个名为web.ts的新对象。这是代码：

@Injectable()
export class Web {
  headers = new HttpHeaders(
    {'access-control-allow-origin':'*'}
  );

  rootUrl = "http://localhost:8093/";

}

然后作为提供商添加到我的app.module.ts：

  providers: [Web],

然后我就像服务一样将它注入我的客户端：

  constructor(private web: Web) {}

这解决了我的问题。

如何在Angular 5

4 个答案: