ClassProvider的使用

阅读须知

本系列教程的开发环境及开发语言:

基础知识

Provider 的作用

在 Angular 中我们通过 Provider 来描述与 Token 相关联的依赖对象的创建方式。在 Angular 中依赖对象的创建方式分为以下四种:

  • useClass
  • useValue
  • useExisting
  • useFactory

(图一:注入器、Provider与依赖对象关系)

Provider 的分类

在 Angular 中 Provider 主要分为:

  • TypeProvider
  • ClassProvider
  • ValueProvider
  • ExistingProvider
  • FactoryProvider

ClassProvider

ClassProvider 接口定义

------ --------- ------------- -
  -- ------------------------------------------------
  -- ------------------
  -------- ---- 
  --------- ----------
  -- -------------- -------------------------------------
  -- ----
  ------- -------- 
-

看完上面的接口定义,相信一些读者会觉得陌生。在本系列教程第二小节中,我们用到了 TypeProvider。不信你往下看:

-----------
  ---
  ---------- -------------- -- ---
  ---------- --------------
--
------ ----- --------- - -

-- --------------
------ --------- ------------ ------- --------- --

那跟 ClassProvider 有什么关系?先不急,请你继续往下看:

-----------
  ---
  ---------- --
    -------- ------------ --------- ----------- -- ---
  ---
  ---------- --------------
--
------ ----- --------- - -

是不是终于看到了 useClass 。其实上面两种方式是等价的,方式一更加简洁,方式二是采用标准的语法哈。那么问题来了,什么时候要使用 useClass 语法?回答这个问题前,我们先看个需求。

假设由于业务需要,先前我们定义的 HeroService 的数据,需要从服务器获取,而不是使用静态数据。项目采用前后端分离的开发方式进行开发,此外在项目开发前已经协商好数据格式,也给出了对应的模拟数据(测试数据)。

那么除了修改原有的 HeroService 服务外,有没有其它方式可以方便地验证一下模拟数据,同时保持较小的改动量哈。其实我们可以创建一个新的数据服务,如 MockHeroService ,具体实现如下:

创建 MockHeroService 服务

------ ----- --------------- -
    ------ ------- ------ ---------- -------- --------- ----- - -
        - --- --- ----- ----------- --
        - --- --- ----- -------- --
        - --- --- ----- --- --- --
        - --- --- ----- ------- --
        - --- --- ----- --------- -
    --

    ---------- -
        ------ -----------
    -
-

</{>

使用 MockHeroService 服务

-----------
  ---
  ---------- --
    -------- ------------ --------- ---------------
  ---
  ---------- --------------
--
------ ----- --------- - -

更新完相关的代码,正常情况下,在 http://localhost:4200/ 页面,你将看到以下的内容:

--- -- - ----- ---------
--- -- - ----- ------
--- -- - ----- -- --
--- -- - ----- -----
--- -- - ----- -------

其实服务命名为 MockHeroService 的目的,也是为了说明依赖注入的好处,即易于进行本地单元测试。此外假设没有利用 Angular 依赖注入的特性,我们需要修改应用中每个应用到 HeroService 的地方。

我有话说

ClassProvider 接口中的 Type 类型是什么?

------ --------- ------- ------- -------- - --- --------- ------- -- -

------ -------- --------- ----- - -- --------- -
  ------ --- - --- -----------
-

上一篇:组件服务注入
下一篇:FactoryProvider的使用