本文共 2091 字，大约阅读时间需要 6 分钟。

指令（Directive）在 Angular 开发中的应用

环境

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

摘要

指令（Directive）是 Angular 开发中的核心概念之一。在 Angular 1.0 时代（当时称为 AngularJS），指令是扩展 DOM 元素的主要手段。虽然随着时间推移，组件（Component）的普及使得指令的使用频率有所下降，但对理解 Angular 的核心机制仍至关重要。

组件与指令之间的关系

通过查看 Angular 源码，可以发现 Component 接口实际上是 Directive 的子接口。这意味着，组件本身也是一个特定类型的指令。与普通的指令不同，组件不仅可以定义 HTML 模板，还能通过 @Component 装饰器进行配置。

指令的种类

Angular 中指令的用途

指令在 Angular 中用于增强 DOM 功能。例如，可以通过自定义指令来：

• 实现点击防抖动功能（避免双击后服务器未响应）。
• 高亮显示特定内容。
• 实现其他与 DOM 相关的交互功能。

指令举例

4.1 指令功能

示例：实现鼠标悬停时显示黄色背景

Highlight me!

指令代码（ HighlightDirective ）

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.2 Angular CLI 生成基本文件

通过 Angular CLI 快速生成指令模板：

ng generate directive MyHighlight

生成的文件包括 HTML、CSS 和 TypeScript 文件。

4.3 指令核心代码

完整的指令代码示例：

import { Directive, ElementRef } from '@angular/core';@Directive({ selector: '[appHighlight]' })export class HighlightDirective {  constructor(public el: ElementRef) {    this.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 使用指令

在 HTML 中使用自定义指令：

Highlight me!

总结

通过上述内容，可以更好地理解 Angular 中指令的核心作用及其在实际开发中的应用场景。

转载地址：http://totfz.baihongyu.com/