在Angular 1中。X你可以这样定义常量:

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

在Angular中(使用TypeScript)会是什么?

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


当前回答

在Angular2中,你有以下提供定义,它允许你设置不同类型的依赖:

provide(token: any, {useClass, useValue, useExisting, useFactory, deps, multi}

与Angular 1的比较

在Angular1中,app.service等价于Angular2中的useClass。

Angular1中的app.factory相当于Angular2中的useFactory。

app.constant和app.value被简化为useValue,约束更少。也就是说,不再有配置块了。

app.provider——在Angular 2中没有等价的。

例子

使用根注入器进行设置:

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

或者使用组件的注入器进行设置:

providers: [provide(API_ENDPOINT, { useValue: 'http://127.0.0.1:6666/api/'})]

提供是对…的简称:

var injectorValue = Injector.resolveAndCreate([
  new Provider(API_ENDPOINT, { useValue: 'http://127.0.0.1:6666/api/'})
]);

使用注入器,获取值很容易:

var endpoint = injectorValue.get(API_ENDPOINT);

其他回答

在Angular2中,你有以下提供定义,它允许你设置不同类型的依赖:

provide(token: any, {useClass, useValue, useExisting, useFactory, deps, multi}

与Angular 1的比较

在Angular1中,app.service等价于Angular2中的useClass。

Angular1中的app.factory相当于Angular2中的useFactory。

app.constant和app.value被简化为useValue,约束更少。也就是说,不再有配置块了。

app.provider——在Angular 2中没有等价的。

例子

使用根注入器进行设置:

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

或者使用组件的注入器进行设置:

providers: [provide(API_ENDPOINT, { useValue: 'http://127.0.0.1:6666/api/'})]

提供是对…的简称:

var injectorValue = Injector.resolveAndCreate([
  new Provider(API_ENDPOINT, { useValue: 'http://127.0.0.1:6666/api/'})
]);

使用注入器,获取值很容易:

var endpoint = injectorValue.get(API_ENDPOINT);

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

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(){}或任何预定义方法中使用它。

Angular4的一种方法是在模块级别定义一个常量:

const api_endpoint = 'http://127.0.0.1:6666/api/';

@NgModule({
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    MessageService,
    {provide: 'API_ENDPOINT', useValue: api_endpoint}
  ]
})
export class AppModule {
}

那么,为您服务:

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

@Injectable()
export class MessageService {

    constructor(private http: Http, 
      @Inject('API_ENDPOINT') private api_endpoint: string) { }

    getMessages(): Observable<Message[]> {
        return this.http.get(this.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);
    }
}

AngularJS的模块。Constant不能定义标准意义上的常数。

虽然它是一个独立的提供者注册机制,但是最好在相关模块的上下文中理解它。Value ($ provider . Value)函数。官方文档清楚地陈述了用例:

用$injector注册一个值服务,比如一个字符串、一个数字、一个数组、一个对象或一个函数。这是注册服务的缩写,其中其提供者的$get属性是一个不接受参数并返回值服务的工厂函数。这也意味着不可能将其他服务注入到价值服务中。

将其与模块的文档进行比较。常量($ provider . Constant),它也清楚地说明了用例(强调我的):

用$injector注册一个常量服务,比如一个字符串、一个数字、一个数组、一个对象或一个函数。与值一样,不可能将其他服务注入到常量中。 但与value不同的是,常量可以被注入到模块的配置函数中(参见angular.Module),而且它不能被AngularJS的装饰器覆盖。

因此,AngularJS的constant函数并没有在这个领域中提供一个通常理解的常量。

也就是说,对所提供的对象施加的限制,以及它之前通过$注入器的可用性,清楚地表明该名称是类推使用的。

如果你想在AngularJS应用程序中有一个实际的常量,你可以像在任何JavaScript程序中一样“提供”一个

export const π = 3.14159265;

在Angular 2中,同样的技术也适用。

Angular 2应用程序没有AngularJS应用程序那样的配置阶段。此外,没有服务装饰器机制(AngularJS decorator),但考虑到它们彼此之间的差异,这并不特别令人惊讶。

例如

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

是模糊任意的,有点令人讨厌,因为$ provider。Constant被用来指定一个对象,这个对象碰巧也是一个常量。你还不如写信算了

export const apiEndpoint = 'http://127.0.0.1:6666/api/';

因为任何一方都可以改变。

现在关于可测性的争论,嘲笑常数,被削弱了,因为它字面上是不变的。

不模拟π。

当然,您的应用程序特定的语义可能是您的端点可能会更改,或者您的API可能具有非透明的故障转移机制,因此API端点在某些情况下更改是合理的。

但在这种情况下,将其作为单个URL的字符串文字表示提供给常量函数是行不通的。

一个更好的参数,可能更符合AngularJS $ provider存在的原因。常量函数是,当AngularJS被引入时,JavaScript还没有标准的模块概念。在这种情况下,全局变量将用于共享可变或不可变的值,使用全局变量是有问题的。

也就是说,通过框架提供这样的东西可以增加与该框架的耦合。它还将特定于Angular的逻辑与适用于任何其他系统的逻辑混合在一起。

这并不是说这是一种错误或有害的方法,但就我个人而言,如果我想在Angular 2应用程序中使用常量,我会写

export const π = 3.14159265;

就像我使用AngularJS一样。

事情改变得越多……

以下是我最近在这种情况下的经验:

@angular / cli: 1.0.0 节点:6.10.2 @angular /核心:4.0.0

我在这里遵循了官方和更新的文档:

https://angular.io/docs/ts/latest/guide/dependency-injection.html !# dependency-injection-tokens

似乎OpaqueToken现在已弃用,我们必须使用InjectionToken,所以这些是我的文件运行起来像一个魅力:

app-config.interface.ts

export interface IAppConfig {

  STORE_KEY: string;

}

app-config.constants.ts

import { InjectionToken } from "@angular/core";
import { IAppConfig } from "./app-config.interface";

export const APP_DI_CONFIG: IAppConfig = {

  STORE_KEY: 'l@_list@'

};

export let APP_CONFIG = new InjectionToken< IAppConfig >( 'app.config' );

app.module.ts

import { APP_CONFIG, APP_DI_CONFIG } from "./app-config/app-config.constants";

@NgModule( {
  declarations: [ ... ],
  imports: [ ... ],
  providers: [
    ...,
    {
      provide: APP_CONFIG,
      useValue: APP_DI_CONFIG
    }
  ],
  bootstrap: [ ... ]
} )
export class AppModule {}

my-service.service.ts

  constructor( ...,
               @Inject( APP_CONFIG ) private config: IAppConfig) {

    console.log("This is the App's Key: ", this.config.STORE_KEY);
    //> This is the App's Key:  l@_list@

  }

结果是干净的,主机上没有任何警告,这要感谢John Papa最近在这个问题上的评论:

https://github.com/angular/angular-cli/issues/2034

该键在接口的另一个文件中实现。