环境:
angular cli: 11.0.6angular: 11.0.7node: 12.18.3npm : 6.14.6ide: visual studio code1. 摘要指令（directive）在angular 1.0时代（当时叫angularjs）是很流行的，现在用到的偏少。可以简单理解为，指令（directive）用于扩展已有element（dom）。【相关教程推荐：《angular教程》】
2. 组件与指令之间的关系如果去看angular源码，可以看到下面定义
/** * supplies configuration metadata for an angular component. * * @publicapi */export declare interface component extends directive {
是的，component派生于directive，也就是说，component属于directive。
2.1. 指令的种类
component 是 directive 的子接口，是一种特殊的指令，component 可以带有 html 模板，directive 不能有模板。
属性型指令：用来修改 dom 元素的外观和行为，但是不会改变dom 结构，angular 内置指令里面典型的属性型指令有 ngclass、ngstyle，如果打算封装自己的组件库，属性型指令是必备的内容。
结构型指令：可以修改 dom 结构，内置的常用结构型指令有 *ngfor、*ngif 和 *ngswitch。由于结构型指令会修改 dom 结构，因而同一个 html 标签上面不能同时使用多个结构型指令。如果要在同一个 html 元素上面使用多个结构性指令，可以考虑加一层空的元素来嵌套，比如在外面套一层空的（p) 。
3. angular 中指令的用途angualr中用指令来增强dom的功能，包括 html 原生dom和我们自己自定义的组件（component）。举例来说，可以扩展一个button，实现避免点击后，服务器端未响应前的二次点击；高亮某些收入内容等等。
4. 指令举例
4.1. 指令功能
实现一个指令，鼠标移动到上面时， 背景显示为黄色，鼠标移开，恢复正常。
4.2. anuglar cli生成基本文件
ng generate directive myhighlight
anuglar cli自动生成html、css、ut等文件。
4.3. directive指令核心代码
import { directive, elementref } from '@angular/core';@directive({ selector: '[apphighlight]'})export class highlightdirective { constructor(el: elementref) { el.nativeelement.style.backgroundcolor = 'yellow'; } @hostlistener('mouseenter') onmouseenter() { this.highlight('yellow'); } @hostlistener('mouseleave') onmouseleave() { this.highlight(null); } private highlight(color: string) { this.el.nativeelement.style.backgroundcolor = color; }}
4.4. 使用该指令
<p my-highlight>highlight me!</p>
my-highlight 即我们的元素扩展属性（指令、directive）。
5. 总结指令（directive）用于扩展dom 元素或组件的功能。
angular中的 *ngfor、*ngif 和 *ngswitch 都是angular内置的指令。
更多编程相关知识，请访问：编程视频！！
以上就是聊聊angular中的指令（directive）的详细内容。