FactoryProvider的使用

阅读须知

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

基础知识

FactoryProvider 的作用

FactoryProvider 用于告诉 Injector (注入器),通过调用 useFactory 对应的函数,返回 Token 对应的依赖对象。

FactoryProvider 的使用

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

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

FactoryProvider 接口

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

FactoryProvider

介绍完基础知识,接下来我们马上进入正题。不知道大家是否还记得,之前我们创建过的 HeroComponent 组件:

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

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

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

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

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

</{>

那么现在问题来了,假设我们想在获取英雄数据时,输出调试信息,那应该怎么办?What ~,这个问题不是很简单么,直接使用 console.log API 输出相应信息不就行了么:

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

那问题又来了,如果多个组件都使用 HeroService 去获取英雄数据,那么是不是每个组件都得添加对应的语句。另外如果要修改输出的调试信息,那就得修改程序中多个地方。其实我们一般只需要在开发阶段,输出调试信息,因此上面的方案不合理,也不够灵活。

其实我们可以借鉴之前引入 HeroService 服务的思路,创建一个 LoggerService 来解决上面提到的问题。

创建 LoggerService 服务

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

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

配置 LoggerService 服务

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

使用 LoggerService 服务

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

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

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

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

</{>

以上代码运行后会抛出以下异常信息:

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

有的读者,眼睛一亮,可能是你在创建 LoggerService 服务时,忘记使用 @Injectable 装饰器了。哈哈,其实我是故意的,但我加上 @Injectable() 后,还是抛出了以下异常:

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

为什么会出现上面的异常信息呢?我们再看一下前面创建的 LoggerService 服务:

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

在 Angular 中我们通过构造注入的方式注入依赖对象, private enable: boolean 这种方式表示我们要注入 Type 类型的对象。然后 boolean 是表示基本数据类型,并不是所需的 Type 类型:

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

接下来我们再来看一下最早抛出的异常:

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

其实问题的答案也在 LoggerService 类的构造函数中,在创建 LoggerService 对象时,我们需要设置 enable 参数的值。那么如何解决呢? 当然可以使用我们的主角 - FactoryProvider 。具体如下:

使用 FactoryProvider

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

当更新完代码,然后再来一个华丽的保存操作,最后打开你的控制台,你将看到预期的输出信息:

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

难道就这样结束了,关于 FactoryProvider 的相关内容先告一段落,下一篇我们将介绍如何使用 FactoryProvider 配置依赖对象。


上一篇:ClassProvider的使用
下一篇:FactoryProvider配置依赖对象