在Angular 1中。X你可以这样定义常量:
angular.module('mainApp.config', [])
.constant('API_ENDPOINT', 'http://127.0.0.1:6666/api/')
在Angular中(使用TypeScript)会是什么?
我只是不想在我的所有服务中一遍又一遍地重复API基url。
在Angular 1中。X你可以这样定义常量:
angular.module('mainApp.config', [])
.constant('API_ENDPOINT', 'http://127.0.0.1:6666/api/')
在Angular中(使用TypeScript)会是什么?
我只是不想在我的所有服务中一遍又一遍地重复API基url。
当前回答
以下改动对我来说在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);
}
}
其他回答
你可以为你的全局变量创建一个类,然后像这样导出这个类:
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 4中,你可以使用环境类来保存所有的全局变量。
你有环境。Ts和environment. products . Ts。
例如
export const environment = {
production: false,
apiUrl: 'http://localhost:8000/api/'
};
在你的服务中:
import { environment } from '../../environments/environment';
...
environment.apiUrl;
我有另一种定义全局常数的方法。因为如果我们在ts文件中定义,如果在生产模式中构建,就不容易找到常数来改变值。
export class SettingService {
constructor(private http: HttpClient) {
}
public getJSON(file): Observable<any> {
return this.http.get("./assets/configs/" + file + ".json");
}
public getSetting(){
// use setting here
}
}
在app文件夹中,我添加文件夹configs/setting.json
设置.json中的内容
{
"baseUrl": "http://localhost:52555"
}
在app模块中添加APP_INITIALIZER
{
provide: APP_INITIALIZER,
useFactory: (setting: SettingService) => function() {return setting.getSetting()},
deps: [SettingService],
multi: true
}
通过这种方式,我可以更容易地更改json文件中的值。 我还将这种方法用于常量错误/警告消息。
所有的解决方案似乎都很复杂。我在寻找这种情况下最简单的解我只想用常数。常量很简单。是否有反对以下解决方案的意见?
app.const.ts
'use strict';
export const dist = '../path/to/dist/';
app.service.ts
import * as AppConst from '../app.const';
@Injectable()
export class AppService {
constructor (
) {
console.log('dist path', AppConst.dist );
}
}