本篇文章给大家介绍一下angular中的指令（directive）。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
环境:Angular CLI: 11.0.6Angular: 11.0.7Node: 12.18.3npm : 6.14.6IDE: Visual Studio Code
1. 摘要
指令（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. 使用该指令
Highlight me!
登录后复制
my-highlight 即我们的元素扩展属性（指令、directive）。
5. 总结
指令（Directive）用于扩展DOM 元素或组件的功能。
Angular中的 *ngFor、*ngIf 和 *ngSwitch 都是Angular内置的指令。
更多编程相关知识，请访问：编程视频！！
以上就是聊聊Angular中的指令（Directive）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2711783.html
