在Angular应用程序中，有时需要为整个应用提供一些全局的设置，比如默认的URL、价格等。这些设置可以被应用中的任何组件或服务类访问。实现全局设置的方法有很多，但本文将介绍一种使用服务的方法，因为它的灵活性非常适合为需要这些设置的任何类提供应用程序范围的设置。
首先，需要创建一个类来存储希望在Angular应用程序中使用的值。例如，如果有一个产品表单，用户将使用它来向数据库添加新产品，可能希望在他们添加新产品时提供一些默认值。下面是一个命名为AppSettings的类，它有两个属性：defaultUrl和defaultPrice。这些值稍后将被设置到product组件类中的Product对象中。
export class AppSettings {
defaultUrl: string = "http://www.fairwaytech.com";
defaultPrice: number = 1;
}
要创建这个类，请在\src\app文件夹下添加一个名为\shared的文件夹，并在其中添加一个新的Typescript文件，命名为AppSettings.ts。然后输入上面的代码片段。
接下来，需要创建一个服务类来返回AppSettings类的实例。在\shared文件夹下添加一个新的Typescript文件，命名为AppSettingsService.ts。然后添加下面的代码：
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { AppSettings } from "./appsettings";
@Injectable()
export class AppSettingsService {
getSettings(): Observable {
let settings = new AppSettings();
return Observable.of(settings);
}
}
这个服务类相当标准。在getSettings()方法中，创建了一个新的AppSettings类的实例，并从这个服务返回该对象。创建服务的主要原因是为了提供灵活性，以便以后更改检索设置的实现方式。例如，可能会选择从JSON文件中读取设置，或者甚至可能会调用Web API来获取设置。任何调用此服务的方法都将始终进行相同的调用，而不管这些设置存储在哪里。调用方法不知道实现是否更改，它们仍然接收到相同的设置类。
要从这个服务类中检索设置，请在组件中导入AppSettings和AppSettingsService类。
import { AppSettings } from '../shared/appsettings';
import { AppSettingsService } from '../shared/appsettings.service';
将AppSettingsService添加到构造函数中，以告诉Angular将服务注入到这个类中。在类中创建一个私有属性来保存从getSettings()方法检索到的设置。在ngOnInit()方法中，使用subscribe方法调用getSettings()方法。subscribe方法有三个参数可以传递；一个成功函数，一个错误函数，和一个完成函数。在成功函数中，将返回的结果设置到settings属性。在这个示例中，忽略了错误。在完成函数中，创建了一个新的Product对象，并将价格和URL属性分配给设置对象中返回的默认值。Product对象绑定到详细页面上的字段，如图1所示。
export class ProductDetailComponent implements OnInit {
constructor(private appSettingsService: AppSettingsService) { }
product: Product;
private settings: AppSettings;
ngOnInit(): void {
this.appSettingsService.getSettings()
.subscribe(settings => this.settings = settings,
() => null,
() => {
this.product = new Product();
this.product.price = this.settings.defaultPrice;
this.product.url = this.settings.defaultUrl;
});
}
}
图1：价格和URL字段用AppSettings类中的默认值填充。
与其硬编码设置值，不如将这些设置放入JSON文件中。在\src\app文件夹下创建一个名为\assets的文件夹。向其中添加一个名为appsettings.json的JSON文件，并添加以下内容。
{
"defaultUrl": "http://angular.io",
"defaultPrice": 2
}
修改AppSettingsService类以从此文件中读取。从@angular/http导入Http和Response类。导入ReactiveJS操作符map和catch，以及observable和throw。修改getSettings()方法以调用http.get()方法，传入创建的JSON文件的路径。使用了一个名为extractData()的函数来提取调用map()函数返回的响应。还创建了一个名为handleErrors()的方法来处理任何异常。
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
import { AppSettings } from "./appsettings";
@Injectable()
export class AppSettingsService {
constructor(private http: Http) { }
getSettings(): Observable {
return this.http.get("/src/app/assets/appsettings.json")
.map(this.extractData)
.catch(this.handleErrors);
}
private extractData(res: Response) {
let body = res.json();
return body || {};
}
private handleErrors(error: any): Observable {
console.error('An error occurred', error);
return Observable.throw(error.message || error);
}
}