如何在Angular中创建自定义的指令以扩展HTML功能

要在Angular中创建自定义指令，您可以使用 @Directive 装饰器。下面是一个简单的示例，演示如何创建一个自定义指令来验证用户输入是否包含特定字符：

1. 首先，在您的 Angular 应用程序中创建一个新的 TypeScript 文件，并在其中定义您的自定义指令：

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

@Directive({
  selector: '[appSpecialCharacterValidator]'
})
export class SpecialCharacterValidatorDirective {

  constructor(private el: ElementRef) {}

  @HostListener('input') onInput() {
    const inputValue: string = this.el.nativeElement.value;
    if (inputValue.includes('@')) {
      this.el.nativeElement.value = inputValue.replace('@', '');
    }
  }

}

2. 然后，在您的模块中声明并导入该自定义指令：

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

import { AppComponent } from './app.component';
import { SpecialCharacterValidatorDirective } from './special-character-validator.directive';

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

3. 最后，在您的 HTML 模板中使用您的自定义指令：

<input type="text" appSpecialCharacterValidator>

现在，当用户输入包含特殊字符 ‘@’ 的文本时，该字符将被从输入框中移除。您可以根据自己的需求扩展这个自定义指令，以实现更多的功能。