Angular4學習之依賴注入

在乙個專案中，元件和服務之間存在錯綜複雜的關係，為了最小程度的耦合，我們需要來管理組織這種關係，依賴注入就是管理這種關係的一種方式。

在學習乙個概念之前，我們必須要知道我們為什麼要學習這個東西，這個東西究竟解決了什麼問題。就好比這裡講到的，依賴注入究竟解決了什麼問題。要解決這個問題，我們先來看看示例**：

export
class
car // method using the engine and tires
drive() car with ` +
`$ cylinders and $ tires.`;
}}複製**

以上是來自angular官網的一段**，我們可以看到乙個car類依賴於engine和tires這兩個類，我們在car的建構函式中去例項這兩個依賴類。這有什麼問題？如果有一天我們的tires建構函式需要乙個引數，那麼我們必須要在car的建構函式中去更改**。

// ...
constructor() 
]// ...
複製**

這種**是非常不靈活的。雖然我們可以進行如下結構調整

export
class
car // method using the engine and tires
drive() car with ` +
`$ cylinders and $ tires.`;
}}const car = new car(new engine(), new tires())
複製**

這樣似乎解決了不靈活的問題，但是如果依賴項很多的話，我們都要去手動建立這些例項，也不太方便。其實建立依賴例項的過程完全可以交給乙個專門的'工廠'來做，這就是angular裡面的injector。

@component()
export
class
heroescomponent
}複製**

在angular中，一般我們將這些公共的依賴都會一些乙個服務裡面。在上面的用法我們可以看到多了乙個providers，另外就是在類的建構函式中增加了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,
// not aliased! creates two instances of `newlogger`
]複製**

這種情況下會建立兩個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:

import  from
'@angular/core';
export
複製**

this.title = config.title;

}複製**

inject 裝飾器顯示的宣告所依賴物件的型別

@injectable()
classa}
複製**

等同於

classa}
複製**

更過精彩

Angular4學習之依賴注入

angular4學習記錄依賴注入

深入理解Angular4中的依賴注入

Angular4學習筆記之管道

Angular4學習之依賴注入

angular4學習記錄 依賴注入

深入理解Angular4中的依賴注入

Angular4學習筆記之管道

相關推薦

angular4學習記錄依賴注入