如何在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>

現在，當用戶輸入包含特殊字符 ‘@’ 的文本時，該字符將被從輸入框中移除。您可以根據自己的需求擴展這個自定義指令，以實現更多的功能。