创建自定义的 Angular 指令 (2)

Angular 框架提供了两个非常有用的装饰器，能够有助于自定义指令的开发。

• @HostBinding：绑定一个值到原生宿主元素到属性。
• @HostListener：绑定一个事件监听器到原生宿主元素，并接受两个参数：触发的事件名称和传入事件处理方法的参数。

宿主元素就是属性指令所依附的 HTML 元素，属性指令会改变宿主元素的行为和外观。

接下来，我们创建一个属性指令 alphabet，改变 HTML input 元素的行为。当 input 元素的类型设置为 text 时，添加 alphabet 指令，其功能是，仅允许用户在文本框中输入大小写的英文字母。

首先，通过 Angular CLI 命令，创建指令的源代码文件。

ng generate directive alphabet

命令输出：

CREATE src/app/alphabet.directive.spec.ts (232 bytes)
CREATE src/app/alphabet.directive.ts (145 bytes)
UPDATE src/app/app.module.ts (609 bytes)

然后，编辑 src/app/alphabet.directive.ts 文件，添加一个属性和方法。

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

@Directive({
  selector: '[appAlphabet]’
})
export class AlphabetDirective {

  @HostBinding(‘class’)
  currentClass: string;
  @HostListener('keypress', ['$event’])
  onKeyPress(event: KeyboardEvent) {}

  constructor() { }

}

• currentClass：绑定到 input 元素的 class 属性。
• onKeyPress：绑定到 input 元素的 keypress 事件。

在 input 元素呈现的文本框中，当用户按键进行内容输入时，会触发 input 元素的 keypress 事件。一旦触发 keypress 事件，Angular 框架就会调用 onKeyPress 方法。在该方法中，我们会判断用户按键输入的字符：如果是英文大小写字母，则允许输入；否则，禁止用户输入，不显示到文本框中。具体的业务逻辑如下：

  @HostListener('keypress', ['$event’])
  onKeyPress(event: KeyboardEvent) {
    const charCode = event.key.charCodeAt(0);
    if (charCode >= 65 && charCode <= 90 ) {
      this.currentClass = ‘valid’;
    } else if (charCode >= 97 && charCode < 122) {
      this.currentClass = ‘valid’;
    } else {
      this.currentClass = ‘invalid’;
      event.preventDefault();
    }
  }

页面效果

英文字母输入框

源代码

src/app/alphabet.directive.ts

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

@Directive({
  selector: '[appAlphabet]’
})
export class AlphabetDirective {

  @HostBinding(‘class’)
  currentClass: string;
  @HostListener('keypress', ['$event’])
  onKeyPress(event: KeyboardEvent) {
    const charCode = event.key.charCodeAt(0);
    if (charCode >= 65 && charCode <= 90 ) {
      this.currentClass = ‘valid’;
    } else if (charCode >= 97 && charCode < 122) {
      this.currentClass = ‘valid’;
    } else {
      this.currentClass = ‘invalid’;
      event.preventDefault();
    }
  }

  constructor() { }

}

src/app/app.component.html

<p>
  <input type="text” appAlphabet>
</p>

src/styles.css

.valid {
  border: 2px solid green;
}

.invalid {
  border: 2px solid red;
}