在Angular 4中，你可以使用环境类来保存所有的全局变量。

你有环境。Ts和environment. products . Ts。

例如

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

在你的服务中:

import { environment } from '../../environments/environment';
...
environment.apiUrl;

如果你正在使用Webpack(我推荐使用Webpack)，你可以为不同的环境设置常量。当每个环境都有不同的常数值时，这一点尤其有价值。

在你的/config目录下可能有多个webpack文件(例如，webpack.dev.js, webpack.prod.js等)。然后你会有一个custom- types .d。把t加在这里。下面是每个文件中要遵循的一般模式，以及组件中的示例用法。

网络包。{env}.js

const API_URL = process.env.API_URL = 'http://localhost:3000/';
const JWT_TOKEN_NAME = "id_token";
...
    plugins: [
      // NOTE: when adding more properties, make sure you include them in custom-typings.d.ts
      new DefinePlugin({
        'API_URL': JSON.stringify(API_URL),
        'JWT_TOKEN_NAME': JSON.stringify(JWT_TOKEN_NAME)
      }),

custom-typings.d.ts

declare var API_URL: string;
declare var JWT_TOKEN_NAME: string;
interface GlobalEnvironment {
  API_URL: string;
  JWT_TOKEN_NAME: string;
}

组件

export class HomeComponent implements OnInit {
  api_url:string = API_URL;
  authToken: string = "Bearer " + localStorage.getItem(JWT_TOKEN_NAME)});
}

在阅读了这个帖子和其他一些帖子的所有答案后，我想提供我这些天正在使用的解决方案。

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

// 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中打开文件并找到环境，然后只需替换数据。

关于Angular Universal项目。当Angular Universal项目构建完成时，它会导出两个main.js，一个用于服务器，一个用于浏览器，所以你必须同时修改两个。

你可以为你的全局变量创建一个类，然后像这样导出这个类:

export class CONSTANT {
    public static message2 = [
        { "NAME_REQUIRED": "Name is required" }
    ]

    public static message = {
        "NAME_REQUIRED": "Name is required",
    }
}

在创建并导出你的CONSTANT类之后，你应该在你想要使用的类中导入这个类，就像这样:

import { Component, OnInit                       } from '@angular/core';
import { CONSTANT                                } from '../../constants/dash-constant';


@Component({
  selector   : 'team-component',
  templateUrl: `../app/modules/dashboard/dashComponents/teamComponents/team.component.html`,
})

export class TeamComponent implements OnInit {
  constructor() {
    console.log(CONSTANT.message2[0].NAME_REQUIRED);
    console.log(CONSTANT.message.NAME_REQUIRED);
  }

  ngOnInit() {
    console.log("oninit");
    console.log(CONSTANT.message2[0].NAME_REQUIRED);
    console.log(CONSTANT.message.NAME_REQUIRED);
  }
}

你可以在构造函数或ngOnInit(){}或任何预定义方法中使用它。

虽然有一个AppSettings类和一个字符串常量作为ApiEndpoint的方法是可行的，但这并不理想，因为我们不能在单元测试时将这个真正的ApiEndpoint交换为其他一些值。

我们需要能够将这个api端点注入到我们的服务中(想象一下将一个服务注入到另一个服务中)。我们也不需要为此创建一个完整的类，我们所要做的只是将一个字符串注入到我们的服务中，作为我们的ApiEndpoint。为了完成这个完美的答案，下面是在Angular 2中如何完成的完整代码:

首先，我们需要告诉Angular，当我们在应用中请求ApiEndpoint时，如何提供它的实例(把它看作是注册一个依赖):

bootstrap(AppComponent, [
        HTTP_PROVIDERS,
        provide('ApiEndpoint', {useValue: 'http://127.0.0.1:6666/api/'})
]);         

然后在服务中，我们将这个ApiEndpoint注入到服务的构造函数中，Angular会根据我们上面的注册为我们提供它:

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

@Injectable()
export class MessageService {

    constructor(private http: Http, 
                @Inject('ApiEndpoint') private apiEndpoint: string) { }

    getMessages(): Observable<Message[]> {
        return this.http.get(`${this.apiEndpoint}/messages`)
            .map(response => response.json())
            .map((messages: Object[]) => {
                return messages.map(message => this.parseData(message));
            });
    } 
    // the rest of the code...
}

以下改动对我来说在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);
    }
}