本篇文章為大家介紹一下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中的依賴注入的詳細內容。更多資訊請關注PHP中文網其他相關文章!