原文出处：http://www.itnose.net/detail/6610731.html
这篇文章的目的是帮助大家理解 Angular 2 基于依赖注入的作用域如何工作，需要明白组件，服务等相关知识以及对依赖注入的基本了解。
– Angular 2 服务是不是单例？
– 某种意义上来说，是的。。。
– 兄弟，你说的貌似没什么帮助啊。。。
– 那好吧，让我们从头说起。。。
Angular 1.x 服务非常流行。每一个服务都有一个具体实例，它可以被注入并在需要使用的地方来使用。Angular 2 的服务也照样不错，让我们探讨这个话题吧。
– 兄弟，是时候言归正传啦。。。
– 好的，让我们先从一个简单的服务开始说起，这是让人难以忘记的反例家族的一员。。。
服务尽可能简单
// a very simple counter service
import { Injectable } from '@angular/core';
@Injectable()
export class SimpleCounterService {
private count: number = 0;
inc() {
this.count++;
}
dec() {
this.count--;
}
getCount(): number {
return this.count;
}
}
如果我们想在整个应用程序中使用这个服务，就像我们在 Angular 1 做的那样。我们不需要做更多，只是把它作为 BootStrap 方法的第二个参数就行。
bootstrap(App,[CounterService]);
接下来，我们可以使用任何有用的服务使用任何的组件，比如：
import { Component } from '@angular/core';
import { SimpleCounterService } from './simple_counter.service';
@Component({
selector: 'simple-counter',template: `
<divclass="simple-counter">
<button (click)="dec()">-</button>
{{ getCount() }}
<button (click)="inc()">+</button>
</div>
`
})
export class SimpleCounterComponent {
constructor(private counterService: SimpleCounterService) {
}
dec() {
this.counterService.dec();
}
inc() {
this.counterService.inc();
}
getCount(): number {
return this.counterService.getCount();
}
}
非常简单。
– 兄弟，这没意义啊。每个计数器组件的值都是一样的，如果我需要更多的计数器呢？
– 说的很对。当我们遇到一个这样的服务时，这是最重要的问题之一。让我们采用在 Angular 1 解决该问题的方案：给每个计数器一个唯一标识符。。。
经过唯一标识符处理过的服务
我们的服务。。。
// a very simple counter service
import { Injectable } from '@angular/core';
@Injectable()
export class OldschoolCounterService {
private counters = {};
inc(counterId) {
this.getCounterById(counterId).count++;
}
dec(counterId) {
this.getCounterById(counterId).count--;
}
getCount(counterId): number {
return this.getCounterById(counterId).count;
}
deleteCounter(counterId) {
deletethis.counters[counterId];
}
private getCounterById(id): Object {
if (! this.counters[id]) {
this.counters[id] = { count: 0 };
}
return this.counters[id];
}
}
不要忘记使用 bootstrap 方法：
我们的组件。。。import { Component,Input,OnDestroy } from '@angular/core'; import { OldschoolCounterService } from './oldschool_counter.service'; @Component({ selector: 'oldschool-counter',template: ` <divclass="simple-counter"> <button (click)="dec()">-</button> {{ getCount() }} <button (click)="inc()">+</button> </div> ` }) export class OldschoolCounterComponent implements OnDestroy { @Input() private counterId: string; constructor(private counterService: OldschoolCounterService) { } dec() { this.counterService.dec(this.counterId); } inc() { this.counterService.inc(this.counterId); } getCount(): number { return this.counterService.getCount(this.counterId); } ngOnDestroy() { // we do not want to remember the state of the component,// so we delete the counter from the service this.counterService.deleteCounter(this.counterId); } }– 现在运行得不错，就像我们想要的那样，每个计数器都有不同的值
– 是的，但是。。。
– 我不觉得还有什么问题啊。。。
– 灵活性和可复用性怎么样？
– 我觉得还好吧。我只是刚设置了ID，哦，如果。。。
– 对，就是这个。
这不是这儿唯一的问题。最明显的问题在于我们需要非常小心，不能使用相同的 ID 给不同的组件。这个问题还好解决。更大的问题在于耦合在一起的组件和服务不严密。组件需要提供一个 ID，服务总是需要基于该 ID 来运行。所以我们用特定方法来限制从而实施该服务。
– 好，那该怎么做？
– 这是 Angular 2 采用的方法：正如我之前提到的 Angular 2 的服务是某种单例。。。让我们来看看到底是什么意思
Angular 2 方式的服务
在 Angular 2 中，服务是单例 scopewise 的。
– 为你的健康干杯！
装饰器组件有一个叫 providers 的属性。它工作方式完全和 bootstrap 函数第二个参数相同，但是该服务在组件范围内建立了一个新的实例，因此，组件与每个下级组件都会使用这个新的实例。（除非他们不使用自有的服务上的实例，不过这就另说啦。）
让我们看看新的计数组件。。。
import { Component } from '@angular/core'; import { SimpleCounterService } from './simple_counter.service'; @Component({ selector: 'newage-counter',template: ` <divclass="newage-counter"> <button (click)="dec()">-</button> {{ getCount() }} <button (click)="inc()">+</button> </div> `,providers: [ SimpleCounterService ] }) export class NewageCounterComponent { constructor(private counterService: SimpleCounterService) { } dec() { this.counterService.dec(); } inc() { this.counterService.inc(); } getCount(): number { return this.counterService.getCount(); } }– 那服务呢？
– 我们简单地使用 SimpleCounterService 就好啦。
由于我们在组件中有一个专门的实例服务，每个组件将会有自身的值。
就像我们看到的 scopewise 单例服务设计模式是 Angular 2 的一个令人难以置信的功能。它给代码更多的灵活性，使其更容易重用及维护。而且我们只是说了表面上的一点点。
原文链接：https://www.f2er.com/angularjs/148101.html
