angular简单介绍(详解Angular依赖注入)
angular简单介绍
详解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.stri.jpg" alt="angular简单介绍(详解Angular依赖注入)" border="0" />
可以看到控制台打印出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.stri.jpg" alt="angular简单介绍(详解Angular依赖注入)" border="0" />
子注入器当中没有找到依赖的时候会去父注入器中找
以上就是详解Angular依赖注入的详细内容,更多关于Angular的资料请关注开心学习网其它相关文章!
- angularjs过滤器
- angular 常用模块(详解Angular之路由基础)
- angular路由树(详解Angular路由之子路由)
- angular封装公共组件(详解Angular组件之生命周期二)
- angular使用方法(Angular环境搭建及简单体验小结)
- vue react和angular(详解React Angular Vue三大前端技术)
- angular封装进度条组件(如何用DevUI搭建自己的Angular组件库)
- angular快速创建模块指令(详解Angular项目中共享模块的实现)
- angular开发详解(详解Angular组件生命周期一)
- angularjs使用指令(详解Angular路由动画及高阶动画函数)
- angular模块的组成(详解Angular结构型指令模块和样式)
- angular怎么把组件用在根组件里(详解Angular组件之投影)
- angular怎么创建声明(使用Angular CDK实现一个Service弹出Toast组件功能)
- angular定义一个管道(Angular管道PIPE的介绍与使用方法)
- angular引入组件库(详解Angular组件之中间人模式)
- angular组件化(详解Angular父子组件通讯)
- 没钱只能吃土(没钱要吃土了幽默短信发朋友圈)
- 今年考高会很难吗(今年高考会考试吗)
- 盘古开天地 他创造了世界,谁创造了盘古 盘古是伏羲吗(盘古开天地他创造了世界)
- 关于队徽 你了解这些么 二(关于队徽你了解这些么)
- 冬天来了手脚冰凉 真不是因为上辈子你是折翼的天使(冬天来了手脚冰凉)
- 0 1 岁婴儿最强作息指南,照着做养出天使宝宝(01岁婴儿最强作息指南)
热门推荐
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9