在Angular 1中。X你可以这样定义常量:
angular.module('mainApp.config', [])
.constant('API_ENDPOINT', 'http://127.0.0.1:6666/api/')
在Angular中(使用TypeScript)会是什么?
我只是不想在我的所有服务中一遍又一遍地重复API基url。
当前回答
以下是我最近在这种情况下的经验:
@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
该键在接口的另一个文件中实现。
其他回答
以下是我最近在这种情况下的经验:
@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
该键在接口的另一个文件中实现。
如果你正在使用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)});
}
angular团队提供的配置解决方案可以在这里找到。
以下是所有相关代码:
1) app.config.ts
import { OpaqueToken } from "@angular/core";
export let APP_CONFIG = new OpaqueToken("app.config");
export interface IAppConfig {
apiEndpoint: string;
}
export const AppConfig: IAppConfig = {
apiEndpoint: "http://localhost:15422/api/"
};
2) app.module.ts
import { APP_CONFIG, AppConfig } from './app.config';
@NgModule({
providers: [
{ provide: APP_CONFIG, useValue: AppConfig }
]
})
3) your.service.ts
import { APP_CONFIG, IAppConfig } from './app.config';
@Injectable()
export class YourService {
constructor(@Inject(APP_CONFIG) private config: IAppConfig) {
// You can use config.apiEndpoint now
}
}
现在您可以在任何地方注入配置，而无需使用字符串名称，并使用您的接口进行静态检查。
当然，您可以进一步分离接口和常数，以便在生产和开发中提供不同的值。
为Angular 4+更新
现在，如果你的项目是通过angular-cli生成的，我们可以简单地使用angular提供的默认环境文件。
例如
在环境文件夹中创建以下文件
environment.prod.ts environment.qa.ts environment.dev.ts
每个文件都可以保存相关的代码更改，例如:
environment.prod.ts export const environment = { production: true, apiHost: 'https://api.somedomain.com/prod/v1/', CONSUMER_KEY: 'someReallyStupidTextWhichWeHumansCantRead', codes: [ 'AB', 'AC', 'XYZ' ], }; environment.qa.ts export const environment = { production: false, apiHost: 'https://api.somedomain.com/qa/v1/', CONSUMER_KEY : 'someReallyStupidTextWhichWeHumansCantRead', codes: [ 'AB', 'AC', 'XYZ' ], }; environment.dev.ts export const environment = { production: false, apiHost: 'https://api.somedomain.com/dev/v1/', CONSUMER_KEY : 'someReallyStupidTextWhichWeHumansCantRead', codes: [ 'AB', 'AC', 'XYZ' ], };
应用程序中的用例
您可以将环境导入到任何文件中，例如服务clientUtilServices.ts
从'../../environments/environment'导入{environment};
getHostURL(): string {
return environment.apiHost;
}
构建中的用例
打开你的angular cli文件。angular-cli。Json和“apps”内部:[{…}]添加以下代码
"apps":[{
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts",
"qa": "environments/environment.qa.ts",
}
}
]
如果你想在生产环境中构建，运行ng build——env=prod，它会从environment. product .ts中读取配置，就像你在qa或dev中做的一样
##老答案
我一直在做的事情如下，在我的提供者:
import {Injectable} from '@angular/core';
@Injectable()
export class ConstantService {
API_ENDPOINT :String;
CONSUMER_KEY : String;
constructor() {
this.API_ENDPOINT = 'https://api.somedomain.com/v1/';
this.CONSUMER_KEY = 'someReallyStupidTextWhichWeHumansCantRead'
}
}
然后我可以在任何地方访问所有常量数据
import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';
import {ConstantService} from './constant-service'; //This is my Constant Service
@Injectable()
export class ImagesService {
constructor(public http: Http, public ConstantService: ConstantService) {
console.log('Hello ImagesService Provider');
}
callSomeService() {
console.log("API_ENDPOINT: ",this.ConstantService.API_ENDPOINT);
console.log("CONSUMER_KEY: ",this.ConstantService.CONSUMER_KEY);
var url = this.ConstantService.API_ENDPOINT;
return this.http.get(url)
}
}
在Angular 2中创建应用范围常量的最佳方法是使用environment。ts文件。声明这些常量的好处是，您可以根据环境改变它们，因为每个环境可以有不同的环境文件。
推荐文章
- 如何在Typescript中解析JSON字符串
- TypeScript中的extends和implements有什么区别
- 如何用angular 2路由器重新加载当前路由
- 创建组件与Angular-CLI &将它添加到一个特定的模块
- 迭代Typescript Map
- 定义TypeScript回调类型
- @HostBinding和@HostListener:它们是做什么用的?
- 如何在TypeScript中实现睡眠函数?
- 在Angular 6中生成服务时，为din提供可注入装饰器的目的是什么?
- 返回一个空的Observable
- 为什么——isolatedModules错误被任何导入修复?
- 如何用npm更新TypeScript到最新版本?
- 如何在angular2中调用另一个组件函数
- Angular 2可选的路由参数
- Typescript:在类型“{" a ":字符串上找不到参数类型为'string'的索引签名;｝
