在乙個專案中,元件和服務之間存在錯綜複雜的關係,為了最小程度的耦合,我們需要來管理組織這種關係,依賴注入就是管理這種關係的一種方式。
在學習乙個概念之前,我們必須要知道我們為什麼要學習這個東西,這個東西究竟解決了什麼問題。就好比這裡講到的,依賴注入究竟解決了什麼問題。要解決這個問題,我們先來看看示例**:
以上是來自angular官網的一段**,我們可以看到乙個export
class
car // method using the engine and tires
drive() car with ` +
`$ cylinders and $ tires.`;
}}複製**
car
類依賴於engine
和tires
這兩個類,我們在car
的建構函式中去例項這兩個依賴類。這有什麼問題?如果有一天我們的tires
建構函式需要乙個引數,那麼我們必須要在car
的建構函式中去更改**。
這種**是非常不靈活的。雖然我們可以進行如下結構調整// ...
constructor()
]// ...
複製**
這樣似乎解決了不靈活的問題,但是如果依賴項很多的話,我們都要去手動建立這些例項,也不太方便。其實建立依賴例項的過程完全可以交給乙個專門的'工廠'來做,這就是angular裡面的injector。export
class
car // method using the engine and tires
drive() car with ` +
`$ cylinders and $ tires.`;
}}const car = new car(new engine(), new tires())
複製**
在angular中,一般我們將這些公共的依賴都會一些乙個服務裡面。在上面的用法我們可以看到多了乙個providers,另外就是在類的建構函式中增加了@component()
export
class
heroescomponent
}複製**
private engine: engine
我們就可以去使用engine這個例項了,在這個過程中,我們並沒有去手動去建立依賴項的例項。這是因為angular的injector幫我們自動建立了。在這裡有乙個比較形象的比喻就是,乙個廚子(injector)根據菜譜(providers)去做菜(依賴的例項),但是究竟做哪些菜呢,客人說了算(private engine: engine
也就是建構函式中的)
在上面我們說過通過依賴注入建立的例項是可以實現共享的,我們證明一下。import from
'@angular/core';
@injectable()
export
class
heroservice
}複製**
在這裡我們可以看見列印出來的是import from
'@angular/core';
import from
'./dependence.component';
@component()
@injectable()
export
class
servicecomponent
implements
oninit
ngoninit() {}
}複製**
true
,這裡我們採用的是手動建立例項,所以我們並不需要在providers中提供「菜譜」,實際上resolveandcreate
的引數就是乙個providers
我們有四種配置注入過程,即使用類、使用工廠、使用值、使用別名
這是我們最常見的情形在angular中,通常如果provide的值和useclass的值一樣,我們可以簡化為
複製**
[myservice]
。
複製**
如果我們有兩個服務
複製**
oldservice
和newservice
介面都一致,出於某種原因,我們不得不使用oldservice
作為token,但是我們又想使用newservice
中的介面,那麼我們就可以使用別名。
這種情況下會建立兩個newlogger的例項,這顯然不是我們想要的結果,這時我們就可以使用存在的[ newlogger,
// not aliased! creates two instances of `newlogger`
]複製**
[ newlogger,
// alias oldlogger w/ reference to newlogger
]複製**
當使用工廠時,我們可以通過變數的不同值,去例項不同的類。也就是說我們需要根據不同的值返回不同的依賴例項的時候,那麼我們就需要使用工廠。}
複製**
目前為止我們的依賴都是存在的,但是實際情況並不是總是這樣。那麼我們可以通過@optional裝飾器來解決這個問題。
import from
'@angular/core';
// ....
constructor(
@optional() private dependenceservice: dependenceservice
) {}
複製**
但是這裡dependenceservice這個服務類的定義還是存在的,只是沒有準備好,例如沒有在providers中使用依賴查詢的規則是按照注入器從當前元件向父級元件查詢,直到找到這個依賴為止,但是如果限定查詢路徑截止在宿主元件,那麼如果宿主元件中沒有就會報錯,我們可以通過@host修飾器達到這一功能。
如果乙個元件注入了依賴項,那麼這個元件就是這個依賴項的宿主元件,但是如果這個元件通過ng-content
被嵌入到宿主元件,那麼這個宿主元件就是該依賴項的宿主元件。
當我們在建構函式中使用private dependenceservice: dependenceservice
,injector就可以正確的知道我們要例項哪乙個類,這是因為在這裡dependenceservice
充當了token的角色(也就是說類名是可以充當token的),我們只需要在providers中去尋找具有相同token的值就行,但是往往我們注入不是乙個類,而是乙個字串,function或者物件。而這裡string、方法名和物件是不能夠充當token的,那麼這時我們就需要來手動建立乙個token:
this.title = config.title;import from
'@angular/core';
export
複製**
}複製**
inject 裝飾器顯示的宣告所依賴物件的型別
等同於@injectable()
classa}
複製**
更過精彩classa}
複製**
angular4學習記錄 依賴注入
是指程式執行過程中,如果需要呼叫另乙個物件協助時,無須在 中建立被呼叫者,而是依賴於外部的注入 在元件中的constructor中 constructor private productservice productservice 1.providers productservice 等價於 第二種...
深入理解Angular4中的依賴注入
在angular中使用依賴注入,可以幫助我們實現松耦合,可以說只有在元件中使用依賴注入才能真正的實現可重用的元件。如果我們有個服務product.service.ts,其中export了乙個productservice類,類中有乙個getproduct方法。如果不使用依賴注入,假設我們需要在prod...
Angular4學習筆記之管道
管道 pipes把資料作為輸入,然後轉換它,給出期望的輸出。每個應用開始的時候差不多都是一些簡單任務 獲取資料 轉換它們,然後把它們顯示給使用者。angular內建了一些管道,比如datepipe uppercasepipe lowercasepipe currencypipe和percentpip...