版权声明:作者已开启版权声明,如转载请注明转载地址。 https://blog.csdn.net/qq_34829447/article/details/86108589
一.依赖性注入原始注入方式
1.定义最基本的依赖性注入
-
Person类
class Person { id:Id; address:Address; constructor(id:Id, address:Address){ //显性构造,此时如果Address的内容发生变化则需要调整这里的代码,不灵活 //this.id = Id.getInstance('idcard'); //this.address = new Address('test','test','test','test'); } }
-
Id类
class Id { getInstance(type:string):Id { return new Id(); } }
-
Address类
class Address { provice:string; city:string; district:string; street:string; constructor(provice,city,district,street){ this.provice = provice; this.city = city; this.district = district; this.street = street; } }
-
main函数
main() { //最基本的依赖性注入模式,全部推给入口函数去实例化,但是太麻烦 const id = Id.getInstance('idcard'); const address = new Address('test','test','test','test'); const person = new Person(id,address); }
2.Angular依赖性注入框架
-
实例代码
- 构造函数
constructor(){ //通过provider数组构建injector注入者池子 const injector = ReflectiveInjector.resolveAndCreate([ {privode:Person, useClass:Person}, {provide:Address, useFactory:()=>{ return new Address('test','test','test','test'); }}, {provide:Id, useFactory:()=>{ return Id.getInstance('idcard'); }} ]); //从池子中获取实例 const person = inject.get(Person); }
- 修改Person
class Person { id:Id; address:Address; //需要Id和Address注入,进而到池子里找provider是如何注入的 constructor(@Inject(Id) id, @Inject(Address) address){} }
二.使用InjectReflect方式注入
1.使用依赖性注入框架[如上所示]
- 注入者injector,通过ReflectiveInjector.resolveAndCreate([…])创建
- 提供者provider,为数组中的provide定义注入的细节内容,告诉inject应该怎么实例化这个对象
- 通过inject.get(类)获得实例
2.注入内容返回相同实例与不同实例
-
每次都返回同一个实例内容
-
每次返回不同的实例内容(返回的是一个方法)
constructor(){ //通过provider数组构建injector注入者池子 const injector = ReflectiveInjector.resolveAndCreate([ {privode:Person, useClass:Person}, {provide:Address, useFactory:()=>{ return ()=>{ return new Address('test','test','test','test'); } }}, {provide:Id, useFactory:()=>{ return Id.getInstance('idcard'); }} ]); //从池子中获取实例 const person = inject.get(Person); }
-
每次返回不同的实例内容(通过Inject.resolveAndCreateChild([父类])的方法创建)
constructor(){ //通过provider数组构建injector注入者池子 const injector = ReflectiveInjector.resolveAndCreate([ {privode:Person, useClass:Person},//可以直接简写成Person {provide:Address, useFactory:()=>{ return new Address('test','test','test','test'); }}, {provide:Id, useFactory:()=>{ return Id.getInstance('idcard'); }} ]); //通过父池子创建子池子 const childInjector = injector.resolveAndCreateChild([Person]); const child = childInjector.get(Person); //每一个child都为不同的实例 }
- 在上述代码中可能发现创建子池子时只提供了Person,没有给出Address和Id的provide实例。此时子找不到时,就会找父的内容。
- 即可以解释当module中providers内容时,在module的component中都可以使用。且在父component中定义的providers,子component都可以使用。
三.使用Provider注入
1.操作流程
-
在module.ts文件中编写providers属性数组,添加如下provider
providers:[ {provide:'BASE_CONFIG',useValue:'http://localhost:3000'}//写在这里可以统一改动 ]
-
在要使用的类的构造函数中注入,如下所示
constructor(@Inject('BASE_CONFIG')config){ console.log(config);//打印的是http://localhost:3000 }
2.注意事项
- 想使用统一的内容时,可以统一写到providers中,这样想修改时可以直接修改providers中的内容,想使用时注入即可
- 默认情况下,angular会把providers中的内容当成单件处理,取得都是同一个实例对象