Angular 4 依賴注入教程之一

閱讀須知

本系列教程的開發環境及開發語言：

依賴注入簡介

在介紹依賴注入的概念和作用前，我們先來看個例子。各位看官請睜大眼睛，我要開始 "閉門造車" 了。

示例說明

一輛車內部構造很複雜，出於簡單考慮，我們就只考慮三個部分：車身、車門和引擎。接下來我們來定義各個部分。

1.定義車身類export default class Body { }2.定義車門類export default class Doors { }3.定義車引擎類export default class Engine { start() { console.log( :car:開動鳥~~~ ); } }4.定義汽車類import Engine from ./engine ; import Doors from ./doors ; import Body from ./body ; export default class Car { engine: Engine; doors: Doors; body: Body; constructor() { this.engine = new Engine(); this.body = new Body(); this.doors = new Doors(); } run() { this.engine.start(); } }

一切已準備就緒，我們馬上來造一輛車：

let car = new Car(); // 造輛新車 car.run(); // 開車上路咯

車已經可以成功上路，但卻存在以下問題：

問題一：在創建新車的時候，你沒有選擇，假設你想更換汽車引擎的話，按照目前的方案，是實現不了的。

問題二：在汽車類內部，你需要在構造函數中手動去創建各個部件。

為了解決第一個問題，提供更靈活的方案，我們可以重構一下已定義的汽車類，具體如下：

重構完汽車類，我們來重新造輛新車：

此時我們已經解決了上面提到的第一個問題，要解決第二個問題我們要先介紹一下依賴注入的概念。

依賴注入的概念

在軟體工程中，依賴注入是種實現控制反轉用於解決依賴性設計模式。一個依賴關係指的是可被利用的一種對象（即服務提供端） 。依賴注入是將所依賴的傳遞給將使用的從屬對象（即客戶端）。該服務是將會變成客戶端的狀態的一部分。 傳遞服務給客戶端，而非允許客戶端來建立或尋找服務，是本設計模式的基本要求。 —— 維基百科

看完概念是不是已經暈了，其實我們只要記住依賴注入的三種角色：使用者、服務(依賴對象)及注入器(Injector)。接下來我們馬上來看一下 Angular 中依賴注入的應用。

Angular 依賴注入的應用更新後的汽車類具體應用import { ReflectiveInjector } from @angular/core ; let injector = ReflectiveInjector.resolveAndCreate([Car, Engine, Doors, Body]); let car = injector.get(Car); car.run();

看完上面的示例，我們前面提到的第二個問題，已經完美解決了哈。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！