阅读须知
本系列教程的开发环境及开发语言:
基础知识
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
配置依赖对象。