Angular入门到精通系列教程（10）

npm : 6.14.6

IDE: Visual Studio Code

1. 

摘要

指令（

Directive

）在

Angular 1.0

时代（当时叫

AngularJS

）是很流⾏的，现在⽤到的偏少。可以简单理解为，指令（

Directive

）⽤于扩展已

有

Element

（

DOM

）。

2. 

组件与指令之间的关系

如果去看

Angular

源码，可以看到下⾯定义

/**

 * Supplies configuration metadata for an Angular component.

 *

 * @publicApi

 */

export declare interface Component extends Directive {

是的，

Component

派⽣于

Directive

，也就是说，

Component

属于

Directive

。

2.1. 

指令的种类

1. 

Component 

是

 Directive 

的⼦接⼝，是⼀种特殊的指令，

Component 

可以带有

 HTML 

模板，

Directive 

不能有模板。

2. 

属性型指令：⽤来修改

 DOM 

元素的外观和⾏为，但是不会改变

DOM 

结构，

Angular 

内置指令⾥⾯典型的属性型指令有

 ngClass

、

ngStyle

，如果打算封装⾃⼰的组件库，属性型指令是必备的内容。

3. 

结构型指令：可以修改

 DOM 

结构，内置的常⽤结构型指令有

 

*ngFor

、

*ngIf

 

和

 

*ngSwitch

。由于结构型指令会修改

 DOM 

结构，因⽽同⼀

个

 HTML 

标签上⾯不能同时使⽤多个结构型指令。如果要在同⼀个

 HTML 

元素上⾯使⽤多个结构性指令，可以考虑加⼀层空的元素来

嵌套，⽐如在外⾯套⼀层空的（

div

) 

。

3. Angular 

中指令的⽤途

Angualr

中⽤指令来增强

DOM

的功能，包括

 HTML 

原⽣

DOM

和我们⾃⼰⾃定义的组件（

Component

）。举例来说，可以扩展⼀个

Button

，

实现避免点击后，服务器端未响应前的⼆次点击；⾼亮某些收⼊内容等等。

4. 

指令举例

4.1. 

指令功能

实现⼀个指令，⿏标移动到上⾯时，

 

背景显⽰为黄⾊，⿏标移开，恢复正常。

4.2. Anuglar CLI

⽣成基本⽂件

ng generate directive MyHighlight

Anuglar CLI

⾃动⽣成

html

、

css

、

ut

等⽂件。