定义全局常量

Question

在 Angular 1.x 中，您可以像这样定义常量：

 angular.module('mainApp.config', [])
    .constant('API_ENDPOINT', 'http://127.0.0.1:6666/api/')

Angular（使用 TypeScript）中的等价物是什么？

我只是不想在我的所有服务中一遍又一遍地重复 API 基本 URL。

原文由 AndreFeijo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

以下更改适用于 Angular 2 最终版本：

 export class AppSettings {
   public static API_ENDPOINT='http://127.0.0.1:6666/api/';
}

然后在服务中：

 import {Http} from 'angular2/http';
import {Message} from '../models/message';
import {Injectable} from 'angular2/core';
import {Observable} from 'rxjs/Observable';
import {AppSettings} from '../appSettings';
import 'rxjs/add/operator/map';

@Injectable()
export class MessageService {

    constructor(private http: Http) { }

    getMessages(): Observable<Message[]> {
        return this.http.get(AppSettings.API_ENDPOINT+'/messages')
            .map(response => response.json())
            .map((messages: Object[]) => {
                return messages.map(message => this.parseData(message));
            });
    }

    private parseData(data): Message {
        return new Message(data);
    }
}

原文由 AndreFeijo 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在阅读了该线程的所有答案以及其他一些答案之后，我想提供我这些天正在使用的解决方案。

首先，我必须为环境添加一个类。有了这个，我实现了我的属性的数据类型，所以它很容易使用。此外，我可以将默认数据绑定到我的环境，这样我就可以在所有环境之间共享公共数据。有时我们有一些在所有环境中具有相同值的变量（例如站点名称），我们不想每次都更改为所有环境。

 // environments\ienvironments.ts

export class IEnvironment implements IEnvironmentParams {
  public production: boolean;
  public basicURL: string = 'https://www.someawesomedomain.com';
  public siteName: string = 'My awesome site';

  constructor(params: IEnvironmentParams) {
    this.production = params.production ?? false;
    this.basicURL = params.basicURL ?? this.basicURL;
    this.siteName = params.siteName ?? this.siteName;
  }
}

export interface IEnvironmentParams {
  production: boolean;
  basicURL?: string;
  siteName?: string;
}

请注意，我使用 IEnvironmentParams 来简化环境的创建，这样我可以传递对象而不会弄乱构造函数参数并避免参数顺序问题，并且还使用 ?? 提供所需的默认值功能 --- 运营商。

 // environments\environment.prod.ts

import {IEnvironment, IEnvironmentParams} from "./ienvironment";

const params: IEnvironmentParams = {
    production: true
};

export const environment: IEnvironment = new IEnvironment(params);

 // environments\environment.ts

import {IEnvironment, IEnvironmentParams} from "./ienvironment";

const params: IEnvironmentParams = {
    production: false
};

export const environment: IEnvironment = new IEnvironment(params);

用法示例

import {environment} from "../environments/environment";

// app-routing.module.ts

const routes: Routes = [
  {
    path: '', component: HomeComponent,
    data: {
        title: `${environment.siteName} | Home page title!`,
        description: 'some page description',
    }
  }
];

检查代码完成情况。

 // home.component.ts

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent {

  constructor() {
    console.log(`home component constructor - showing evironment.siteName - ${environment.siteName}`);
  }
}

你可以在任何你想要的地方使用它，类、服务、指令、组件等。

对于那些想在构建后替换值的人。你能行的。这有点棘手，但是当您构建 Angular 应用程序时，环境数据会导出到 main.js ，请看下一个屏幕截图。

只需在任何 IDE 中打开文件并找到 environment 然后只需替换数据即可。

关于 Angular 通用项目。构建 Angular Universal 项目时，它将导出 2 main.js 一个用于服务器，一个用于浏览器，因此您必须同时更改两者。

原文由 Raikish 发布，翻译遵循 CC BY-SA 4.0 许可协议