详解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的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家介绍了Angular应用程序的Hydration基本概念详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-09-09
这篇文章主要介绍了AngularJS 自定义过滤器,这里整理了相关资料及示例代码，有兴趣的小伙伴可以参考下2016-09-09
每个Angular版本在其生命周期中都经历了各个阶段。组件在Angular中起着关键作用; 在这里，本文将讨论Angular中的组件生命周期以及它们如何影响框架所有版本的生命周期。2021-05-05
这篇文章主要介绍了AngularJS bootstrap启动的知识，这里整理了相关资料及简单实例代码，,需要的朋友可以参考下2016-09-09
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
本篇文章主要介绍了在 Angular 中使用Chart.js 和 ng2-charts的示例代码，具有一定的参考价值，有兴趣的可以了解一下2017-08-08
这篇文章主要为大家详细介绍了Angular实现搜索框及价格上下限功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
Angularjs中$http以post请求通过消息体传递参数的实现方法
这篇文章主要介绍了Angularjs中$http以post请求通过消息体传递参数的方法,结合实例形式分析了$http使用post请求传递参数的相关设置与使用技巧,需要的朋友可以参考下2016-08-08
这篇文章主要介绍了详解AngularJS中的表格使用,作为热门的JavaScript框架,AngularJS中提供的表格功能十分强大,需要的朋友可以参考下2015-06-06
本篇文章主要介绍了Angular 5 给组件本身的标签添加样式class的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
今天小编就为大家分享一篇Angular2之二级路由详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论