angular中依赖注入的示例分析-mile米乐体育

这篇文章主要介绍angular中依赖注入的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

依赖注入：设计模式

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

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

注入器injector：用它的api创建依赖的实例

provider:怎样创建？（构造函数,工程函数）

object：组件，模块需要的依赖

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

一、依赖注入

classid{ staticgetinstance(type:string):id{ returnnewid(); } }  classaddress{ constructor(provice,city,district,street){} }  classperson{ id:id; address:address; constructor(){ this.id=id.getinstance("idcard"); this.address=newaddress("北京","背景","朝阳区","xx街道"); } }

问题：person需要清楚的知道address和id的实现细节。

id和address重构后，person需要知道怎么重构。

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

classid{ staticgetinstance(type:string):id{ returnnewid(); } }  classaddress{ constructor(provice,city,district,street){} }  classperson{ id:id; address:address; constructor(id:id,address:address){ this.id=id; this.address=address; } }  main(){ //把构造依赖对象，推到上一级，推调用的地方 constid=id.getinstance("idcard"); constaddress=newaddress("北京","背景","朝阳区","xx街道"); constperson=newperson(id,address); }

person已经不知道id和address的细节了。

这是最简单的依赖注入。

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

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

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

二、angular的依赖注入框架

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

reflectiveinjector ：用于实例化对象和解析依赖关系。

import{component,reflectiveinjector}from"@angular/core";

resolveandcreate接收一个provider数组，provider告诉injector应该怎样去构造这个对象。

constructor(){ //接收一个provider数组 constinjector=reflectiveinjector.resolveandcreate([ { provide:person,useclass:person }, { provide:address,usefactory:()=>{ if(environment.production){ returnnewaddress("北京","背景","朝阳区","xx街道xx号"); }else{ returnnewaddress("西藏","拉萨","xx区","xx街道xx号"); } } }, { provide:id,usefactory:()=>{ returnid.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"] }) exportclassappcomponent{  constructor(privateoc:overlaycontainer){ //接收一个provider数组 constinjector=reflectiveinjector.resolveandcreate([ { provide:person,useclass:person }, { provide:address,usefactory:()=>{ if(environment.production){ returnnewaddress("北京","背景","朝阳区","xx街道xx号"); }else{ returnnewaddress("西藏","拉萨","xx区","xx街道xx号"); } } }, { provide:id,usefactory:()=>{ returnid.getinstance('idcard'); } } ]); constperson=injector.get(person); console.log(json.stringify(person)); }  }  classid{ staticgetinstance(type:string):id{ returnnewid(); } }  classaddress{ 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; } }  classperson{ 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){ returnnewaddress("北京","背景","朝阳区","xx街道xx号"); }else{ returnnewaddress("西藏","拉萨","xx区","xx街道xx号"); } } } },

二、利用父子injector。

constructor(privateoc:overlaycontainer){ //接收一个provider数组 constinjector=reflectiveinjector.resolveandcreate([ person, { provide:address,usefactory:()=>{ if(environment.production){ returnnewaddress("北京","背景","朝阳区","xx街道xx号"); }else{ returnnewaddress("西藏","拉萨","xx区","xx街道xx号"); } } }, { provide:id,usefactory:()=>{ returnid.getinstance('idcard'); } } ]);  constchildinjector=injector.resolveandcreatechild([person]);  constperson=injector.get(person); console.log(json.stringify(person)); constpersonfromchild=childinjector.get(person); console.log(person===personfromchild);//false }

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

以上是“angular中依赖注入的示例分析”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注恰卡编程网行业资讯频道！