Angular 4依赖注入学习教程之简介（一）

学习目录

本文主要给大家介绍的是关于Angular 4 依赖注入简介的相关内容，分享出来供大家参考学习，下面来看看详细的介绍：

本系列教程的开发环境及开发语言：

基础知识

Angular CLI 基本使用

1、安装 Angular CLI (可选)

npm install -g @angular/cli

2、创建新的项目

ng new PROJECT-NAME

3、启动本地服务器

cd PROJECT-NAMEng serve

依赖注入简介

在介绍依赖注入的概念和作用前，我们先来看个例子。各位看官请睁大眼睛，我要开始 "闭门造车" 了。

示例说明

一辆车内部构造很复杂，出于简单考虑，我们就只考虑三个部分：车身、车门和引擎。接下来我们来定义各个部分。

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(); // 开车上路咯

车已经可以成功上路，但却存在以下问题：

为了解决第一个问题，提供更灵活的方案，我们可以重构一下已定义的汽车类，具体如下：

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(); }}

重构完汽车类，我们来重新造辆新车：