角4依赖注入学习教程之InjectToken的使用(八) - 行业资讯 - 肥雀云

　　<李>角4依赖注入教程之一依赖注入简介李　　<李>角4依赖注入教程之二组件服务注入李　　<李>角4依赖注入教程之三ClassProvider的使用李　　<李>角4依赖注入教程之四FactoryProvider的使用李　　<李>角4依赖注入教程之五FactoryProvider配置依赖对象李　　<李>角4依赖注入教程之六注射装饰器李　　<李>角4依赖注入教程之七ValueProvider的使用李　　<李>角4依赖注入教程之八InjectToken的使用李　　　　

本文主要给大家介绍的是关于角4依赖注入之InjectToken使用的相关内容,分享出来供大家参考学习、下面来一起看看详细的介绍:

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

　　<李>角4 + 　　<李>角CLI李　　<李> 手稿　　　　

<强> OpaqueToken简介
　　

OpaqueToken用于创建可在供应商中使用的令牌。

<强> OpaqueToken类的定义

　　　　　　出口类OpaqueToken { 　　构造函数(保护_desc:字符串){} 　　　　toString():{字符串返回的令牌$ {this._desc} ';} 　　} 　　　　

<强> OpaqueToken类的使用

　　　　　　从“@angular进口{ReflectiveInjector}/核心”; 　　　　var t=新OpaqueToken(“价值”); 　　var喷射器=ReflectiveInjector.resolveAndCreate ([ 　　{提供:t, useValue:“bindingValue”} 　　]); 　　injector.get (t);//癰indingValue” 　　　　

<强> InjectionToken简介
　　

InjectionToken用于创建可在供应商中使用的令牌。

<强> InjectionToken类的定义

　　　　　　出口类InjectionToken扩展OpaqueToken { 　　私人_differentiate_from_OpaqueToken_structurally:任何; 　　构造函数(desc:字符串){超级(desc);} 　　　　toString (): string{返回InjectionToken $ {this._desc} ';} 　　} 　　　　

<强> InjectionToken类的使用

　　　　　　从“@angular进口{ReflectiveInjector}/核心”; 　　　　var t=新InjectionToken(“价值”); 　　var喷射器=ReflectiveInjector.resolveAndCreate ([ 　　{提供:t, useValue:“bindingValue”} 　　]); 　　injector.get (t);//癰indingValue” 　　　　

在介绍InjectionToken相关内容之前,我们先回顾一下“ValueProvider的使用”这篇中我们介绍的内容:

<强>使用ValueProvider
　　

　　　　　　@NgModule ({ 　　...，　　供应商:[ 　　{ 　　提供:“apiUrl”, 　　useValue:“http://localhost: 4200/英雄” 　　} 　　), 　　引导(AppComponent): 　　}）　　出口类AppModule {} 　　　　

<强>更新HeroService服务
　　

　　　　　　@Injectable () 　　出口类HeroService { 　　构造函数(私人loggerService: loggerService, 　　私人http: http、　　@ inject (apiUrl)私人apiUrl) {} 　　　　getHeros (): Observable 　　　　

为了能够更方便地管理与维护apiUrl地址,我们利用了ValueProvider和注入装饰器。一切看起来非常顺利,但某一天假设我们引入了一个第三方库——third-lib.ts该文件的内容如下所示:

　　　　　　出口const THIRD_PARTY_PROVIDERS=[ 　　{ 　　提供:“apiUrl”, 　　useValue:“其他Url” 　　} 　　); 　　　　

接着我们在AppModule中配置对应的提供者信息,具体如下:

　　　　　　从“进口{THIRD_PARTY_PROVIDERS}。/第三方; 　　　　@NgModule ({ 　　...，　　供应商:[ 　　{ 　　提供:“apiUrl”, 　　useValue:“http://localhost: 4200/英雄” 　　}, 　　THIRD_PARTY_PROVIDERS 　　), 　　引导(AppComponent): 　　}）　　出口类AppModule {} 　　　　

当更新完上述代码,成功保存后,你会发现http://localhost: 4200/页面,又是空空如也了。这时如果我们打开开发者工具,切换到控制面板你会看到如下异常信息:

　　　　　　http://localhost: 4200/% 20价值404(未找到) 　　　　

什么情况,我们的英雄信息的接口地址被替换了,其实真正的原因是使用字符串作为令牌引起冲突了。那么怎么解决呢?最简单的方式是对调一下ValueProvider与THIRD_PARTY_PROVIDERS的位置。你会发现在http://localhost: 4200/页面,你又能看到英雄信息。当然这不能解决本质问题,因为这样会导致你引入的第三方库不能正常工作。