學習目錄

本文主要給大家介紹的是關于Angular 4 依賴注入簡介的相關內(nèi)容，分享出來供大家參考學習，下面來看看詳細的介紹：

本系列教程的開發(fā)環(huán)境及開發(fā)語言：

基礎知識

Angular CLI 基本使用

1、安裝 Angular CLI (可選)

npm install -g @angular/cli

2、創(chuàng)建新的項目

ng new PROJECT-NAME

3、啟動本地服務器

cd PROJECT-NAMEng serve

依賴注入簡介

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

示例說明

一輛車內(nèi)部構(gòu)造很復雜，出于簡單考慮，我們就只考慮三個部分：車身、車門和引擎。接下來我們來定義各個部分。

1.定義車身類

export default class Body { }

2.定義車門類

export default class Doors { }

3.定義車引擎類

export default class Engine { start() { console.log('🚗開動鳥~~~'); }}

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(); // 開車上路咯

車已經(jīng)可以成功上路，但卻存在以下問題：

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

export default class Car { engine: Engine; doors: Doors; body: Body; constructor(engine, body, doors) { this.engine = engine; this.body = body; this.doors = doors; } run() { this.engine.start(); }}

重構(gòu)完汽車類，我們來重新造輛新車：