原作者: Gabor Elsik 写于:2016/06/02
这篇文章的目的是帮助大家理解 Angular 2 基于依赖注入的作用域如何工作,需要明白组件,服务等相关知识以及对依赖注入的基本了解。

– Angular 2 服务是不是单例?

– 某种意义上来说,是的。。。

– 兄弟,你说的貌似没什么帮助啊。。。

– 那好吧,让我们从头说起。。。

Angular 1.x 服务非常流行。每一个服务都有一个具体实例,它可以被注入并在需要使用的地方来使用。Angular 2 的服务也照样不错,让我们探讨这个话题吧。

– 兄弟,是时候言归正传啦。。。

– 好的,让我们先从一个简单的服务开始说起,这是让人难以忘记的反例家族的一员。。。

服务尽可能简单

如果我们想在整个应用程序中使用这个服务,就像我们在 Angular 1 做的那样。我们不需要做更多,只是把它作为 BootStrap 方法的第二个参数就行。

接下来,我们可以使用任何有用的服务使用任何的组件,比如:

非常简单。

– 兄弟,这没意义啊。每个计数器组件的值都是一样的,如果我需要更多的计数器呢?

– 说的很对。当我们遇到一个这样的服务时,这是最重要的问题之一。让我们采用在 Angular 1 解决该问题的方案:给每个计数器一个唯一标识符。。。

经过唯一标识符处理过的服务

我们的服务。。。

不要忘记使用 bootstrap 方法:

我们的组件。。。

– 现在运行得不错,就像我们想要的那样,每个计数器都有不同的值

– 是的,但是。。。

– 我不觉得还有什么问题啊。。。

– 灵活性和可复用性怎么样?

– 我觉得还好吧。我只是刚设置了ID,哦,如果。。。

– 对,就是这个。

这不是这儿唯一的问题。最明显的问题在于我们需要非常小心,不能使用相同的 ID 给不同的组件。这个问题还好解决。更大的问题在于耦合在一起的组件和服务不严密。组件需要提供一个 ID,服务总是需要基于该 ID 来运行。所以我们用特定方法来限制从而实施该服务。

– 好,那该怎么做?

– 这是 Angular 2 采用的方法:正如我之前提到的 Angular 2 的服务是某种单例。。。让我们来看看到底是什么意思

Angular 2 方式的服务

在 Angular 2 中,服务是单例 scopewise 的。

– 为你的健康干杯!

装饰器组件有一个叫 providers 的属性。它工作方式完全和 bootstrap 函数第二个参数相同,但是该服务在组件范围内建立了一个新的实例,因此,组件与每个下级组件都会使用这个新的实例。(除非他们不使用自有的服务上的实例,不过这就另说啦。)

让我们看看新的计数组件。。。

– 那服务呢?

– 我们简单地使用 SimpleCounterService 就好啦。

由于我们在组件中有一个专门的实例服务,每个组件将会有自身的值。
就像我们看到的 scopewise 单例服务设计模式是 Angular 2 的一个令人难以置信的功能。它给代码更多的灵活性,使其更容易重用及维护。而且我们只是说了表面上的一点点。

Tagged:

发表评论

电子邮件地址不会被公开。 必填项已用*标注