本篇文章给大家介绍一下angular中的依赖注入。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
相关推荐：《angular教程》
依赖注入：设计模式
依赖：程序里需要的某种类型的对象。
依赖注入框架：工程化的框架
注入器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 }
子注入器当中没有找到依赖的时候会去父注入器中找。
三、injector
本文转载自：https://www.cnblogs.com/starof/p/10506295.html
更多编程相关知识，请访问：编程教学！！
以上就是一起了解angular中的依赖注入的详细内容。