Angular自定义指令开发：扩展HTML功能

Angular自定义指令基础概念

在Angular开发中，指令是一种用于扩展HTML的强大机制。自定义指令允许开发者创建自己的指令，以增强HTML元素的功能。Angular中有三种类型的指令：组件（Component）、结构型指令（Structural Directive）和属性型指令（Attribute Directive）。组件是带有模板的指令，结构型指令用于改变DOM布局，而属性型指令用于修改元素的外观或行为。

自定义属性型指令

属性型指令用于改变元素的外观或行为。例如，我们可以创建一个指令来改变元素的背景颜色。首先，使用Angular CLI生成一个指令：

ng generate directive highlight

这将在src/app目录下生成一个highlight.directive.ts文件。打开该文件，代码如下：

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) {}

  @Input() set appHighlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

在上述代码中，我们使用@Directive装饰器来定义一个指令，selector指定了指令的选择器，这里是[appHighlight]，表示当HTML元素带有appHighlight属性时，该指令将生效。ElementRef用于访问DOM元素，我们通过@Input()装饰器定义了一个输入属性appHighlight，当该属性值改变时，会设置元素的背景颜色。

在HTML模板中使用该指令：

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

自定义结构型指令

结构型指令用于改变DOM的结构。例如，*ngIf和*ngFor就是Angular内置的结构型指令。假设我们要创建一个自定义结构型指令*appUnless，它的功能与*ngIf相反。

首先，生成指令：

ng generate directive unless

在unless.directive.ts文件中编写代码：

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

@Directive({
  selector: '[appUnless]'
})
export class UnlessDirective {
  private hasView = false;

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

  @Input() set appUnless(condition: boolean) {
    if (!condition &&!this.hasView) {
      this.viewContainer.createEmbeddedView(this.templateRef);
      this.hasView = true;
    } else if (condition && this.hasView) {
      this.viewContainer.clear();
      this.hasView = false;
    }
  }
}

在上述代码中，TemplateRef表示嵌入的模板，ViewContainerRef用于管理视图。@Input()装饰器定义的appUnless属性用于接收条件。当条件为false且视图尚未创建时，创建视图；当条件为true且视图已创建时，清除视图。

在HTML模板中使用该指令：

<div *appUnless="isLoggedIn">
  <p>Please log in</p>
</div>

指令的生命周期钩子

指令和组件一样，具有生命周期钩子，这些钩子提供了在不同阶段执行代码的机会。

ngOnInit

ngOnInit钩子在指令初始化后被调用，用于执行一次性的初始化逻辑。例如，在前面的HighlightDirective中，如果我们需要在指令初始化时设置一个默认颜色：

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective implements OnInit {
  @Input() appHighlight: string;
  constructor(private el: ElementRef) {}

  ngOnInit() {
    if (!this.appHighlight) {
      this.appHighlight = 'lightblue';
    }
    this.el.nativeElement.style.backgroundColor = this.appHighlight;
  }
}

ngOnChanges

ngOnChanges钩子在指令的输入属性发生变化时被调用。在HighlightDirective中，当appHighlight属性变化时，我们可以记录变化：

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective implements OnChanges {
  @Input() appHighlight: string;
  constructor(private el: ElementRef) {}

  ngOnChanges(changes: SimpleChanges) {
    if (changes.appHighlight) {
      console.log(`Color changed from ${changes.appHighlight.previousValue} to ${changes.appHighlight.currentValue}`);
      this.el.nativeElement.style.backgroundColor = this.appHighlight;
    }
  }
}

ngOnDestroy

ngOnDestroy钩子在指令被销毁时被调用，用于执行清理操作，如取消订阅等。例如，如果指令中使用了Observable并进行了订阅：

import { Directive, ElementRef, Input, OnDestroy } from '@angular/core';
import { Observable, Subscription } from 'rxjs';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective implements OnDestroy {
  @Input() appHighlight: string;
  private subscription: Subscription;
  constructor(private el: ElementRef) {
    const observable = new Observable<string>(observer => {
      observer.next('initial color');
      setTimeout(() => {
        observer.next('new color');
      }, 3000);
    });
    this.subscription = observable.subscribe(color => {
      this.appHighlight = color;
      this.el.nativeElement.style.backgroundColor = this.appHighlight;
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

指令与宿主元素的交互

指令经常需要与宿主元素（即指令所应用的HTML元素）进行交互，这包括监听宿主元素的事件、获取和修改宿主元素的属性等。

监听宿主元素事件

我们可以在指令中监听宿主元素的事件。例如，为HighlightDirective添加一个点击事件监听，当点击元素时，改变其背景颜色：

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  @Input() appHighlight: string;
  @Output() colorChanged = new EventEmitter<string>();

  constructor(private el: ElementRef) {}

  @HostListener('click') onClick() {
    this.appHighlight = 'lightgreen';
    this.el.nativeElement.style.backgroundColor = this.appHighlight;
    this.colorChanged.emit(this.appHighlight);
  }
}

在上述代码中，@HostListener装饰器用于监听宿主元素的click事件。当点击发生时，改变背景颜色并通过EventEmitter发射新的颜色值。在HTML模板中可以这样使用：

<p appHighlight="yellow" (colorChanged)="onColorChange($event)">Click me</p>

在组件的ts文件中：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  onColorChange(color: string) {
    console.log(`Color changed to: ${color}`);
  }
}

获取和修改宿主元素属性

除了监听事件，指令还可以获取和修改宿主元素的属性。例如，我们可以获取input元素的value属性并在控制台打印：

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

@Directive({
  selector: '[appInputLogger]'
})
export class InputLoggerDirective {
  constructor(private el: ElementRef) {}

  @HostListener('input') onInput() {
    const value = this.el.nativeElement.value;
    console.log(`Input value: ${value}`);
  }
}

在HTML模板中：

<input type="text" appInputLogger>

指令的依赖注入

依赖注入（Dependency Injection，简称DI）是Angular的核心特性之一，它允许我们将依赖项（如服务、其他指令等）注入到指令中。

注入服务

假设我们有一个ColorService，用于提供颜色相关的功能，我们可以将其注入到HighlightDirective中： 首先创建ColorService：

ng generate service color

在color.service.ts文件中：

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

@Injectable({
  providedIn: 'root'
})
export class ColorService {
  getRandomColor() {
    const colors = ['red', 'blue', 'green', 'yellow', 'orange'];
    const randomIndex = Math.floor(Math.random() * colors.length);
    return colors[randomIndex];
  }
}

然后在HighlightDirective中注入ColorService：

import { Directive, ElementRef, Input, OnInit } from '@angular/core';
import { ColorService } from './color.service';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective implements OnInit {
  @Input() appHighlight: string;
  constructor(private el: ElementRef, private colorService: ColorService) {}

  ngOnInit() {
    if (!this.appHighlight) {
      this.appHighlight = this.colorService.getRandomColor();
    }
    this.el.nativeElement.style.backgroundColor = this.appHighlight;
  }
}

注入其他指令

在某些情况下，我们可能需要在一个指令中注入另一个指令。例如，假设我们有一个BorderDirective和一个HighlightDirective，HighlightDirective需要获取BorderDirective的一些属性。

首先创建BorderDirective：

ng generate directive border

在border.directive.ts文件中：

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

@Directive({
  selector: '[appBorder]'
})
export class BorderDirective {
  @Input() appBorder: string;
}

然后在HighlightDirective中注入BorderDirective：

import { Directive, ElementRef, Input, OnInit, Optional } from '@angular/core';
import { BorderDirective } from './border.directive';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective implements OnInit {
  @Input() appHighlight: string;
  constructor(private el: ElementRef, @Optional() private borderDirective: BorderDirective) {}

  ngOnInit() {
    if (this.borderDirective && this.borderDirective.appBorder) {
      this.el.nativeElement.style.border = this.borderDirective.appBorder;
    }
    if (!this.appHighlight) {
      this.appHighlight = 'lightblue';
    }
    this.el.nativeElement.style.backgroundColor = this.appHighlight;
  }
}

在上述代码中，@Optional()装饰器表示BorderDirective是可选的，如果存在，则根据其属性设置边框。在HTML模板中：

<p appHighlight appBorder="1px solid black">This text has a border and highlight</p>

指令的高级应用

创建可复用的指令集

在大型项目中，我们可能需要创建一组相关的可复用指令。例如，创建一组用于表单验证的指令。

假设我们要创建一个appMinLength指令用于验证输入框的最小长度。首先生成指令：

ng generate directive min-length

在min-length.directive.ts文件中：

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

@Directive({
  selector: '[appMinLength]'
})
export class MinLengthDirective implements OnInit {
  @Input() appMinLength: number;
  constructor(private el: ElementRef) {}

  ngOnInit() {
    if (!this.appMinLength) {
      this.appMinLength = 5;
    }
  }

  @HostListener('input') onInput() {
    const value = this.el.nativeElement.value;
    if (value.length < this.appMinLength) {
      this.el.nativeElement.style.borderColor ='red';
    } else {
      this.el.nativeElement.style.borderColor = 'green';
    }
  }
}

在HTML模板中：

<input type="text" appMinLength="3">

我们还可以创建其他类似的表单验证指令，如appMaxLength、appRequired等，将它们组合使用，形成一个表单验证指令集，提高代码的复用性和项目的可维护性。

指令与动画结合

Angular的动画模块可以与指令结合，实现更加丰富的交互效果。例如，我们可以为HighlightDirective添加动画效果，当背景颜色改变时，有一个渐变的过渡效果。

首先，在app.module.ts中导入BrowserAnimationsModule：

import { BrowserModule } from '@angular/platform - browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform - browser/animations';

import { AppComponent } from './app.component';
import { HighlightDirective } from './highlight.directive';

@NgModule({
  declarations: [
    AppComponent,
    HighlightDirective
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

然后在highlight.directive.ts中引入动画相关的模块并添加动画：

import { Directive, ElementRef, Input, OnInit, HostListener } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Directive({
  selector: '[appHighlight]',
  animations: [
    trigger('highlightAnimation', [
      state('default', style({ backgroundColor: 'lightblue' })),
      state('highlighted', style({ backgroundColor: 'yellow' })),
      transition('default <=> highlighted', animate('300ms ease - in - out'))
    ])
  ]
})
export class HighlightDirective implements OnInit {
  @Input() appHighlight: string;
  private currentState = 'default';
  constructor(private el: ElementRef) {}

  ngOnInit() {
    if (!this.appHighlight) {
      this.appHighlight = 'lightblue';
    }
    this.el.nativeElement.style.backgroundColor = this.appHighlight;
  }

  @HostListener('click') onClick() {
    this.currentState = this.currentState === 'default'? 'highlighted' : 'default';
    this.el.nativeElement.style.backgroundColor = this.currentState === 'default'? 'lightblue' : 'yellow';
  }
}

在上述代码中，我们使用@angular/animations模块定义了一个动画highlightAnimation，当点击元素时，背景颜色在lightblue和yellow之间有一个300毫秒的渐变过渡效果。在HTML模板中：

<p appHighlight [@highlightAnimation]="currentState">Click me for animation</p>

通过以上方式，我们展示了Angular自定义指令的多种应用场景，从基础的属性型和结构型指令创建，到指令的生命周期钩子、与宿主元素的交互、依赖注入，再到高级应用如创建可复用指令集和与动画结合。这些知识和技巧可以帮助开发者在Angular项目中更加灵活和高效地扩展HTML功能，提升用户体验和项目的质量。