在 Angular 开发中，指令是构建灵活、可复用 UI 逻辑的核心利器。Angular 内置了ngIf、ngFor、ngStyle等常用指令，但在实际项目中，业务场景往往需要定制化的指令来封装通用逻辑。本文将从实战角度，带你掌握属性指令和结构指令的创建、使用及核心区别，让你的 Angular 代码更具复用性和可维护性。

一、指令基础认知

在 Angular 中，指令本质是附加到 DOM 元素上的行为扩展，主要分为三类：

• 组件指令：带模板的指令（即 @Component 装饰器定义的组件），是最常用的指令类型；
• 属性指令：修改 DOM 元素的外观、行为或属性（如ngStyle），作用于元素属性；
• 结构指令：修改 DOM 结构（添加 / 删除元素，如ngIf、ngFor），通过*语法糖简化使用。

本文核心聚焦属性指令和结构指令的自定义开发。

二、属性指令：修改元素外观与行为

属性指令是最常用的自定义指令类型，用于动态修改元素的样式、属性或绑定事件。我们以 “高亮指令” 和 “防抖点击指令” 为例，讲解完整开发流程。

2.1 创建高亮指令（基础示例）

需求：创建一个指令，为元素添加背景高亮样式，支持自定义高亮颜色。

步骤 1：创建指令文件

使用 Angular CLI 快速生成指令（推荐方式）：

ng generate directive directives/highlight
# 简写：ng g d directives/highlight

执行后会生成highlight.directive.ts和对应的测试文件，同时自动在模块的declarations中声明指令。

步骤 2：实现高亮逻辑

修改highlight.directive.ts，核心通过@HostBinding绑定元素样式，@Input接收自定义颜色：

import { Directive, ElementRef, HostBinding, Input, OnInit } from '@angular/core';

@Directive({
  selector: '[appHighlight]', // 指令选择器，使用时写在元素属性上
  standalone: true // Angular 14+ 推荐使用独立指令，无需模块声明
})
export class HighlightDirective implements OnInit {
  // 接收外部传入的高亮颜色，默认值为黄色
  @Input() appHighlight: string = 'yellow';
  // 绑定宿主元素的背景色样式
  @HostBinding('style.backgroundColor') bgColor!: string;

  constructor(private el: ElementRef) {}

  ngOnInit(): void {
    // 初始化时设置背景色
    this.bgColor = this.appHighlight;
    // 可选：直接操作DOM元素（不推荐，优先用HostBinding）
    this.el.nativeElement.style.padding = '4px';
  }
}

步骤 3：使用高亮指令

在组件模板中直接引用指令选择器：

<!-- 基础使用：使用默认黄色 -->
<div appHighlight>默认高亮文本</div>

<!-- 自定义颜色：传入红色 -->
<div [appHighlight]="'red'">红色高亮文本</div>

<!-- 动态绑定颜色 -->
<div [appHighlight]="isActive ? 'blue' : 'gray'">动态高亮文本</div>

2.2 实战：防抖点击指令（进阶）

需求：封装防抖逻辑，避免用户快速重复点击按钮，支持自定义防抖时长。

import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';

@Directive({
  selector: '[appDebounceClick]',
  standalone: true
})
export class DebounceClickDirective {
  // 自定义防抖时长，默认500ms
  @Input() debounceTime: number = 500;
  // 输出防抖后的点击事件
  @Output() appDebounceClick = new EventEmitter<MouseEvent>();
  
  private timer: NodeJS.Timeout | null = null;

  @HostListener('click', ['$event'])
  onClick(event: MouseEvent): void {
    // 清除上一次的定时器
    if (this.timer) clearTimeout(this.timer);
    // 新建定时器，延迟触发事件
    this.timer = setTimeout(() => {
      this.appDebounceClick.emit(event);
      this.timer = null;
    }, this.debounceTime);
  }
}

使用方式：

<!-- 基础使用：默认500ms防抖 -->
<button (appDebounceClick)="handleClick()">提交按钮</button>

<!-- 自定义防抖时长：1000ms -->
<button [debounceTime]="1000" (appDebounceClick)="handleClick()">提交按钮</button>

组件中绑定事件：

handleClick(): void {
  console.log('点击事件触发（已防抖）');
  // 执行业务逻辑
}

三、结构指令：修改 DOM 结构

结构指令通过添加 / 删除 DOM 元素来改变页面结构，核心是使用TemplateRef（模板引用）和ViewContainerRef（视图容器）操作模板。Angular 规定一个元素只能绑定一个结构指令（避免 DOM 操作冲突）。

3.1 创建 “权限控制指令”（基础示例）

需求：根据用户权限动态显示 / 隐藏元素，替代*ngIf的通用权限逻辑封装。

步骤 1：生成指令文件

ng g d directives/hasPermission

步骤 2：实现权限控制逻辑

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appHasPermission]',
  standalone: true
})
export class HasPermissionDirective {
  // 接收用户所需权限（如['admin', 'editor']）
  @Input() set appHasPermission(requiredPermissions: string[]) {
    // 模拟获取当前用户权限（实际项目中从服务/状态管理获取）
    const userPermissions = ['user'];
    
    // 判断用户是否拥有所需权限
    const hasPermission = requiredPermissions.some(perm => 
      userPermissions.includes(perm)
    );

    // 有权限则创建视图，无权限则清除视图
    if (hasPermission) {
      this.vcRef.createEmbeddedView(this.templateRef);
    } else {
      this.vcRef.clear();
    }
  }

  // TemplateRef：获取指令所在的模板内容
  // ViewContainerRef：视图容器，用于创建/销毁视图
  constructor(
    private templateRef: TemplateRef<any>,
    private vcRef: ViewContainerRef
  ) {}
}

步骤 3：使用结构指令

结构指令使用时需要加*语法糖（Angular 会自动解析为<ng-template>）：

<!-- 只有admin权限才显示该按钮 -->
<button *appHasPermission="['admin']">管理后台</button>

<!-- 有editor或admin权限则显示 -->
<div *appHasPermission="['editor', 'admin']">编辑内容区域</div>

3.2 结构指令核心原理

*是 Angular 的语法糖，上述代码等价于：

<ng-template [appHasPermission]="['admin']">
  <button>管理后台</button>
</ng-template>

• TemplateRef：获取<ng-template>包裹的内容；
• ViewContainerRef：决定模板内容渲染的位置（默认在当前元素的父容器）。

四、属性指令 vs 结构指令

特性	属性指令	结构指令
核心作用	修改元素的外观 / 行为 / 属性	添加 / 删除 DOM 元素，修改 DOM 结构
语法	直接作为元素属性使用	需要加*语法糖（或包裹<ng-template>）
核心依赖	ElementRef、HostBinding	TemplateRef、ViewContainerRef
示例	ngStyle、自定义高亮指令	ngIf、ngFor、自定义权限指令
元素绑定限制	可绑定多个	一个元素只能绑定一个

五、自定义指令最佳实践

1. 独立指令优先：Angular 14+ 推荐使用standalone: true，避免模块依赖；
2. 避免直接操作 DOM：优先使用HostBinding/HostListener，而非ElementRef.nativeElement；
3. 输入参数命名规范：指令选择器与输入属性同名（如appHighlight），简化使用；
4. 结构指令单一职责：一个指令只处理一种 DOM 结构逻辑，避免复杂逻辑；
5. 添加类型校验：对输入参数做类型限制，提升代码健壮性；
6. 清理资源：在ngOnDestroy中清除定时器、解绑事件，避免内存泄漏。

总结

1. 自定义指令是 Angular 封装通用 UI 逻辑的核心方式，分为属性指令和结构指令；
2. 属性指令通过HostBinding/HostListener修改元素属性 / 行为，可绑定多个；
3. 结构指令依赖TemplateRef/ViewContainerRef操作 DOM 结构，需加*语法糖，一个元素只能绑定一个。

掌握自定义指令的开发，能大幅提升 Angular 代码的复用性和可维护性，尤其在大型项目中，合理封装指令可有效减少重复代码，让业务逻辑更清晰。