Angular依赖性注入

版权声明：作者已开启版权声明，如转载请注明转载地址。 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中的内容当成单件处理，取得都是同一个实例对象