自定义指令提升Angular应用交互性

Angular 自定义指令基础

什么是指令

在 Angular 中，指令是一种对 DOM 元素、组件或其他指令进行操作、增强或修改的机制。Angular 中有三种类型的指令：组件（Component）、结构型指令（Structural Directive）和属性型指令（Attribute Directive）。组件是带有模板的指令，结构型指令用于改变 DOM 的结构，比如 *ngIf 和 *ngFor，而属性型指令则用于修改元素的外观或行为，像 ngModel。

自定义指令的作用

自定义指令允许开发者扩展 Angular 的功能，以满足特定的业务需求。通过自定义指令，我们可以将复杂的交互逻辑封装起来，提高代码的复用性和可维护性。例如，我们可以创建一个指令来处理特定的表单验证逻辑，或者实现一个自定义的动画效果。

创建自定义指令

要创建一个自定义指令，我们首先需要使用 Angular CLI。在项目的根目录下，运行以下命令：

ng generate directive <directive-name>

例如，要创建一个名为 highlight 的指令，我们运行：

ng generate directive highlight

这会在 src/app 目录下生成一个 highlight.directive.ts 文件，内容如下：

import { Directive } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor() { }

}

这里，@Directive 装饰器标记这个类为一个指令。selector 属性定义了如何在模板中使用这个指令，[appHighlight] 表示这是一个属性型指令，我们可以将其应用到任何元素上，例如 <div appHighlight>Some text</div>。

创建属性型指令提升交互性

简单样式修改指令

我们先从一个简单的属性型指令开始，该指令用于改变元素的背景颜色。修改 highlight.directive.ts 文件如下：

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef) { }

  @Input() appHighlight: string;

  ngOnInit() {
    this.el.nativeElement.style.backgroundColor = this.appHighlight;
  }
}

在这个代码中，我们通过 ElementRef 来访问指令所应用到的 DOM 元素。@Input() 装饰器定义了一个输入属性 appHighlight，它接收一个颜色值。在 ngOnInit 生命周期钩子中，我们使用接收到的颜色值来设置元素的背景颜色。

在组件的模板中，我们可以这样使用这个指令：

<div appHighlight="yellow">This text will have a yellow background</div>

动态样式切换指令

我们进一步扩展这个指令，使其能够根据用户的操作动态切换样式。我们添加一个新的输入属性来控制是否应用高亮效果。修改 highlight.directive.ts 文件如下：

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef) { }

  @Input() appHighlight: string;
  @Input() isHighlighted: boolean;

  ngOnInit() {
    this.updateHighlight();
  }

  @HostListener('mouseenter') onMouseEnter() {
    this.isHighlighted = true;
    this.updateHighlight();
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.isHighlighted = false;
    this.updateHighlight();
  }

  private updateHighlight() {
    if (this.isHighlighted) {
      this.el.nativeElement.style.backgroundColor = this.appHighlight;
    } else {
      this.el.nativeElement.style.backgroundColor = 'transparent';
    }
  }
}

这里，我们添加了 @HostListener 装饰器来监听元素的 mouseenter 和 mouseleave 事件。当鼠标进入元素时，isHighlighted 设置为 true，当鼠标离开时，设置为 false。updateHighlight 方法根据 isHighlighted 的值来更新元素的背景颜色。

在模板中，我们可以这样使用：

<div appHighlight="lightblue" [isHighlighted]="false">Hover me to highlight</div>

自定义事件触发指令

有时候，我们需要自定义一些事件来提升交互性。比如，我们创建一个指令，当元素被双击时触发一个自定义事件。创建 double - click.directive.ts 文件如下：

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

@Directive({
  selector: '[appDoubleClick]'
})
export class DoubleClickDirective {

  @Output() appDoubleClick = new EventEmitter<void>();

  @HostListener('dblclick') onDoubleClick() {
    this.appDoubleClick.emit();
  }
}

在这个指令中，我们使用 @Output 装饰器定义了一个名为 appDoubleClick 的事件发射器。当元素被双击时，onDoubleClick 方法会触发这个事件发射器。

在组件模板中，我们可以这样使用：

<button appDoubleClick (appDoubleClick)="handleDoubleClick()">Double click me</button>

在组件的类中，我们实现 handleDoubleClick 方法：

import { Component } from '@angular/core';

@Component({
  selector: 'app - my - component',
  templateUrl: './my - component.html'
})
export class MyComponent {
  handleDoubleClick() {
    console.log('Button was double - clicked');
  }
}

创建结构型指令增强交互性

简单条件显示指令

结构型指令用于改变 DOM 的结构。我们创建一个类似于 *ngIf 的简单结构型指令，名为 myIf.directive.ts：

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

@Directive({
  selector: '[appMyIf]'
})
export class MyIfDirective {

  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) { }

  @Input() set appMyIf(condition: boolean) {
    if (condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
}

这里，TemplateRef 是对宿主元素内模板的引用，ViewContainerRef 用于在 DOM 中创建和管理视图。@Input() 装饰器定义了一个输入属性 appMyIf，当这个属性为 true 时，通过 createEmbeddedView 方法在 ViewContainerRef 中创建模板视图；当为 false 时，通过 clear 方法清除视图。

在模板中使用如下：

<div *appMyIf="isVisible">This div will be shown if isVisible is true</div>

循环渲染指令

类似于 *ngFor，我们创建一个简单的循环渲染指令 myFor.directive.ts：

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

@Directive({
  selector: '[appMyFor]'
})
export class MyForDirective {

  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) { }

  @Input() set appMyFor(iterable: any[]) {
    this.viewContainer.clear();
    iterable.forEach((item, index) => {
      const context = { $implicit: item, index };
      this.viewContainer.createEmbeddedView(this.templateRef, context);
    });
  }
}

这个指令接收一个可迭代对象作为输入属性 appMyFor。它首先清除 ViewContainerRef 中的所有视图，然后遍历可迭代对象，为每个元素创建一个嵌入视图。context 对象用于向模板传递当前项和索引。

在模板中使用如下：

<ul>
  <li *appMyFor="items">{{ index }} - {{ $implicit }}</li>
</ul>

在组件类中定义 items：

import { Component } from '@angular/core';

@Component({
  selector: 'app - my - component',
  templateUrl: './my - component.html'
})
export class MyComponent {
  items = ['apple', 'banana', 'cherry'];
}

指令的依赖注入与生命周期

依赖注入

在指令中，我们经常需要依赖注入一些服务或其他指令。例如，在一个表单验证指令中，我们可能需要依赖 Angular 的 NgControl 服务来获取表单控件的状态。假设我们创建一个 validateEmail.directive.ts 指令：

import { Directive, Input, NgControl } from '@angular/forms';

@Directive({
  selector: '[appValidateEmail]'
})
export class ValidateEmailDirective {

  constructor(private ngControl: NgControl) { }

  @Input() appValidateEmail: boolean;

  ngOnInit() {
    if (this.appValidateEmail) {
      const emailRegex = /^[a-zA - Z0 - 9_.+-]+@[a-zA - Z0 - 9 -]+\.[a-zA - Z0 - 9-.]+$/;
      const control = this.ngControl.control;
      if (control) {
        control.setValidators((control) => {
          const valid = emailRegex.test(control.value);
          return valid? null : { invalidEmail: true };
        });
        control.updateValueAndValidity();
      }
    }
  }
}

这里，我们通过构造函数注入了 NgControl。在 ngOnInit 中，当 appValidateEmail 为 true 时，我们为表单控件设置一个验证器，检查输入是否为有效的电子邮件格式。

在模板中使用：

<input type="email" appValidateEmail="true" [(ngModel)]="email">

指令的生命周期钩子

指令和组件一样，有多个生命周期钩子。常见的有 ngOnInit、ngOnChanges、ngDoCheck、ngAfterContentInit、ngAfterContentChecked、ngAfterViewInit、ngAfterViewChecked 和 ngOnDestroy。

ngOnInit 用于在指令初始化后执行一次性的操作，比如我们前面在指令中设置样式或初始化验证逻辑。

ngOnChanges 会在指令的输入属性发生变化时被调用。例如，我们前面的 HighlightDirective 可以通过 ngOnChanges 来响应 appHighlight 和 isHighlighted 属性的变化：

import { Directive, ElementRef, Input, HostListener, OnChanges, SimpleChanges } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective implements OnChanges {

  constructor(private el: ElementRef) { }

  @Input() appHighlight: string;
  @Input() isHighlighted: boolean;

  ngOnInit() {
    this.updateHighlight();
  }

  ngOnChanges(changes: SimpleChanges) {
    if ('appHighlight' in changes || 'isHighlighted' in changes) {
      this.updateHighlight();
    }
  }

  @HostListener('mouseenter') onMouseEnter() {
    this.isHighlighted = true;
    this.updateHighlight();
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.isHighlighted = false;
    this.updateHighlight();
  }

  private updateHighlight() {
    if (this.isHighlighted) {
      this.el.nativeElement.style.backgroundColor = this.appHighlight;
    } else {
      this.el.nativeElement.style.backgroundColor = 'transparent';
    }
  }
}

ngDoCheck 用于开发者自定义的变化检测。当 Angular 的默认变化检测机制不能满足需求时，可以使用 ngDoCheck 来手动检测变化。

ngAfterContentInit 和 ngAfterContentChecked 用于处理内容投影相关的逻辑。当组件或指令的内容被初始化或每次检查内容变化时，这两个钩子会被调用。

ngAfterViewInit 和 ngAfterViewChecked 用于处理视图相关的逻辑。当组件或指令的视图被初始化或每次检查视图变化时，这两个钩子会被调用。

ngOnDestroy 用于在指令被销毁时执行清理操作，比如取消订阅事件或释放资源。

指令的最佳实践

指令的命名规范

为了保持代码的一致性和可读性，指令的命名应该遵循一定的规范。通常，指令的选择器命名使用 app - <directive - name> 的格式，其中 app 是应用的前缀，可以根据实际情况修改。指令类名则使用 PascalCase，如 HighlightDirective。

指令的测试

为了确保指令的正确性和稳定性，我们需要对指令进行测试。使用 Angular CLI 生成的指令，会同时生成一个测试文件，例如 highlight.directive.spec.ts。

对于 HighlightDirective 的测试，我们可以测试其背景颜色是否正确设置。修改 highlight.directive.spec.ts 文件如下：

import { Component, DebugElement } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HighlightDirective } from './highlight.directive';
import { By } from '@angular/platform - browser';

@Component({
  template: `<div appHighlight="yellow">Test</div>`
})
class TestComponent { }

describe('HighlightDirective', () => {
  let component: TestComponent;
  let fixture: ComponentFixture<TestComponent>;
  let debugElement: DebugElement;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [HighlightDirective, TestComponent]
    });
    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
    debugElement = fixture.debugElement.query(By.directive(HighlightDirective));
    fixture.detectChanges();
  });

  it('should set background color', () => {
    const divElement = debugElement.nativeElement;
    expect(divElement.style.backgroundColor).toBe('yellow');
  });
});

在这个测试中，我们创建了一个包含 HighlightDirective 的测试组件 TestComponent。通过 TestBed 配置测试模块，创建组件实例并检测变化。然后，我们使用 DebugElement 找到应用了指令的元素，并断言其背景颜色是否为预期的 yellow。

指令的复用性设计

在设计指令时，要考虑其复用性。尽量将指令的功能单一化，避免指令过于复杂。例如，我们前面创建的 HighlightDirective 专注于控制元素的高亮效果，而不是同时处理多种不相关的样式或交互。另外，通过输入属性和输出事件来使指令具有灵活性，这样可以在不同的场景中复用同一个指令。

总结

通过自定义指令，我们可以极大地提升 Angular 应用的交互性。属性型指令可以修改元素的样式和行为，结构型指令能够动态改变 DOM 的结构。在创建和使用指令时，要注意依赖注入、生命周期钩子的正确使用，遵循命名规范和最佳实践，同时对指令进行充分的测试，以确保应用的质量和稳定性。随着对指令的深入理解和使用，我们能够开发出更加高效、灵活和用户体验良好的 Angular 应用。