定义全局常量

新手上路,请多包涵

在 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 许可协议

阅读 1k
2 个回答

以下更改适用于 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 许可协议

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

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

 // 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 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进