详解Angular依赖注入

 更新时间:2021年05月24日 10:32:51   作者:starof  
依赖注入(DI -- Dependency Injection)是一种重要的应用设计模式。Angular里面也有自己的DI框架,在设计应用时经常会用到它,它可以我们的开发效率和模块化程度。 Angular系统中通过在类上添加@Injectable装饰器来告诉系统这个类(服务)是可注入的。

概述

依赖注入:设计模式

依赖:程序里需要的某种类型的对象。

依赖注入框架:工程化的框架

注入器Injector:用它的API创建依赖的实例

Provider:怎样创建?(构造函数,工程函数)

Object:组件,模块需要的依赖

依赖性注入进阶=>Angular中依赖注入框架提供父子层次注入型依赖

一、依赖注入

class Id {
  static getInstance(type: string): Id {
    return new Id();
  }
}

class Address {
  constructor(provice, city, district, street) {}
}

class Person {
  id: Id;
  address: Address;
  constructor() {
    this.id = Id.getInstance("idcard");
    this.address = new Address("北京", "背景", "朝阳区", "xx街道");
  }
}

问题:Person需要清楚的知道Address和Id的实现细节。

ID和Address重构后,Person需要知道怎么重构。

项目规模扩大后,集成容易出问题。

class Id {
  static getInstance(type: string): Id {
    return new Id();
  }
}

class Address {
  constructor(provice, city, district, street) {}
}

class Person {
  id: Id;
  address: Address;
  constructor(id: Id, address: Address) {
    this.id = id;
    this.address = address;
  }
}

main(){
  //把构造依赖对象,推到上一级,推调用的地方
  const id = Id.getInstance("idcard");
  const address = new Address("北京", "背景", "朝阳区", "xx街道");
  const person = new Person(id , address);
}

Person已经不知道Id和Address的细节了。

这是最简单的依赖注入。

问题是在main里还是需要知道细节。

思路:一级一级往上推,一直推到入口函数,入口函数来处理所有对象的构造。构造出来后提供给所有依赖的子模块的子类。

问题:入口函数很难维护。所以需要一个依赖注入框架帮助完成。

二、Angular的依赖注入框架

从v5开始,因为速度慢,引入大量代码已弃用,改为Injector.create。

ReflectiveInjector :用于实例化对象和解析依赖关系。import { Component ,ReflectiveInjector } from "@angular/core";resolveAndCreate接收一个provider数组,provider告诉injector应该怎样去构造这个对象。

constructor() {
    //接收一个provider数组
    const injector = ReflectiveInjector.resolveAndCreate([
      {
        provide: Person, useClass:Person
      },
      {
        provide: Address, useFactory: ()=>{
          if(environment.production){
            return new Address("北京", "背景", "朝阳区", "xx街道xx号");
          }else{
            return new Address("西藏", "拉萨", "xx区", "xx街道xx号");
          }
        }
      },
      {
        provide: Id, useFactory:()=>{
          return Id.getInstance('idcard');
        }
      }
    ]);
  }

Injector:

injector相当于main函数,可以拿到所有依赖池子里的东西。

import { Component ,ReflectiveInjector, Inject} from "@angular/core";
import { OverlayContainer } from "@angular/cdk/overlay";
import { Identifiers } from "@angular/compiler";
import { stagger } from "@angular/animations";
import { environment } from 'src/environments/environment';

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {

  constructor(private oc: OverlayContainer) {
    //接收一个provider数组
    const injector = ReflectiveInjector.resolveAndCreate([
      {
        provide: Person, useClass:Person
      },
      {
        provide: Address, useFactory: ()=>{
          if(environment.production){
            return new Address("北京", "背景", "朝阳区", "xx街道xx号");
          }else{
            return new Address("西藏", "拉萨", "xx区", "xx街道xx号");
          }
        }
      },
      {
        provide: Id, useFactory:()=>{
          return Id.getInstance('idcard');
        }
      }
    ]);
    const person = injector.get(Person);
    console.log(JSON.stringify(person));
  }

}

class Id {
  static getInstance(type: string): Id {
    return new Id();
  }
}

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;
  }
}

class Person {
  id: Id;
  address: Address;
  constructor(@Inject(Id) id, @Inject(Address )address) {
    this.id = id;
    this.address = address;
  }
}

可以看到控制台打印出person信息。

简写:

 // {
      //   provide: Person, useClass:Person
      // },
      Person, //简写为Person

在Angular框架中,框架做了很多事,在provider数组中注册的东西会自动注册到池子中。

@NgModule({
  imports: [HttpClientModule, SharedModule, AppRoutingModule, BrowserAnimationsModule],
  declarations: [components],
  exports: [components, AppRoutingModule, BrowserAnimationsModule],
  providers:[
    {provide:'BASE_CONFIG',useValue:'http://localhost:3000'}
  ]
})
  constructor( @Inject('BASE_CONFIG') config) {
    console.log(config);  //控制台打印出http://localhost:3000
  }

Angular默认都是单例,如果想要每次注入都是一个新的实例。有两种方法。

一,return的时候return一个方法而不是对象。

{
    provide: Address, useFactory: ()=>{
        return ()=>{
            if(environment.production){
                return new Address("北京", "背景", "朝阳区", "xx街道xx号");
            }else{
                return new Address("西藏", "拉萨", "xx区", "xx街道xx号");
            }
        }
    }
},

二、利用父子Injector。

constructor(private oc: OverlayContainer) {
    //接收一个provider数组
    const injector = ReflectiveInjector.resolveAndCreate([
      Person,
      {
        provide: Address, useFactory: ()=>{
          if(environment.production){
            return new Address("北京", "背景", "朝阳区", "xx街道xx号");
          }else{
            return new Address("西藏", "拉萨", "xx区", "xx街道xx号");
          }
        }
      },
      {
        provide: Id, useFactory:()=>{
          return Id.getInstance('idcard');
        }
      }
    ]);

    const childInjector = injector.resolveAndCreateChild([Person]);

    const person = injector.get(Person);
    console.log(JSON.stringify(person));
    const personFromChild = childInjector.get(Person);
    console.log(person===personFromChild);  //false
  }

子注入器当中没有找到依赖的时候会去父注入器中找

以上就是详解Angular依赖注入的详细内容,更多关于Angular的资料请关注脚本之家其它相关文章!

相关文章

  • AngularJS中directive指令使用之事件绑定与指令交互用法示例

    AngularJS中directive指令使用之事件绑定与指令交互用法示例

    这篇文章主要介绍了AngularJS中directive指令使用之事件绑定与指令交互用法,结合实例形式分析了directive指令在模板的使用,事件的绑定及元素、属性、控制器之间的交互相关操作技巧,需要的朋友可以参考下
    2016-11-11
  • Angular6 用户自定义标签开发的实现方法

    Angular6 用户自定义标签开发的实现方法

    这篇文章主要介绍了Angular6 用户自定义标签开发的实现方法,下面我们就通过一个简单的例子演示Angular6中的这一新功能,小编觉得挺不错的,现在分享给大家,需要的朋友可以参考下
    2019-01-01
  • Angular多选、全选、批量选择操作实例代码

    Angular多选、全选、批量选择操作实例代码

    列表批量选择是一个开发人员经常遇到的功能,列表批量选择的实现方式很多,这篇文章主要介绍了Angular多选、全选、批量选择实例代码,有兴趣的可以了解一下。
    2017-03-03
  • angular学习之从零搭建一个angular4.0项目

    angular学习之从零搭建一个angular4.0项目

    本篇文章主要介绍了从零搭建一个angular4.0项目,主要用到的工具angular4.0、angular-cli、npm(v3.10.8)、node(v6.2.0),有兴趣的可以了解一下
    2017-07-07
  • AngularJS中$http的交互问题

    AngularJS中$http的交互问题

    本篇文章主要介绍了AngularJS中$http的交互问题 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • Angular4实现图片上传预览路径不安全的问题解决

    Angular4实现图片上传预览路径不安全的问题解决

    这篇文章主要给大家介绍了关于Angular4实现图片上传预览路径不安全问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧。
    2017-12-12
  • 详解AngularJs中$resource和restfu服务端数据交互

    详解AngularJs中$resource和restfu服务端数据交互

    之前小编和大家分享过使用$http同服务器进行通信,但是功能上比较简单,angularjs还提供了另外一个可选的服务$resource,使用它可以非常方便的同支持restful的服务单进行数据交互。下面来一起看看吧。
    2016-09-09
  • AngularJS中的路由使用及实现代码

    AngularJS中的路由使用及实现代码

    本篇文章主要介绍了AngularJS中的路由使用及实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • AngularJS入门教程二:在路由中传递参数的方法分析

    AngularJS入门教程二:在路由中传递参数的方法分析

    这篇文章主要介绍了AngularJS在路由中传递参数的方法,结合实例形式分析了AngularJS实现路由中传递参数的相关技巧,并总结了相关操作步骤与注意事项,需要的朋友可以参考下
    2017-05-05
  • AngularJS过滤器filter用法总结

    AngularJS过滤器filter用法总结

    这篇文章主要介绍了AngularJS过滤器filter用法,结合实例形式较为详细的总结分析了过滤器filter的功能、分类、使用技巧及自定义过滤器的实现方法,需要的朋友可以参考下
    2016-12-12

最新评论