脚本宝典收集整理的这篇文章主要介绍了聊聊Angular中的指令（Directive），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

本篇文章给大家介绍一下Angular中的指令（Directive）。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

环境:

• Angular cli: 11.0.6
• Angular: 11.0.7
• Node: 12.18.3
• npm : 6.14.6
• IDE: Visual Studio Code

1. 摘要@H_406_23@

---

指令（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）的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的聊聊Angular中的指令（Directive）全部内容，希望文章能够帮你解决聊聊Angular中的指令（Directive）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。