angular自定义指令

1、什么是指令？

官方文档的解释：指令是为 Angular 应用程序中的元素添加额外行为的类。使用 Angular 的内置指令，你可以管理表单、列表、样式以及要让用户看到的任何内容。

2、指令的分类

1）组件 —— 带有模板的指令。这种指令类型是最常见的指令类型。

2）属性型指令 —— 更改元素、组件或其他指令的外观或行为的指令。

3）结构型指令 —— 通过添加和删除 DOM 元素来更改 DOM 布局的指令。

内置属性指令：内置指令只会使用公开 API。它们不会访问任何无法被其它指令访问的私有 API。

常见的属性指令有：

• NgClass —— 添加和删除一组 CSS 类。

• NgStyle —— 添加和删除一组 HTML 样式。

• NgModel —— 将数据双向绑定添加到 HTML 表单元素。

常见的结构指令有：

• NgIf —— 从模板中创建或销毁子视图。

• NgFor —— 为列表中的每个条目重复渲染一个节点。

• NgSwitch —— 一组在备用视图之间切换的指令。

自定义组件，去掉表单中的输入框的空格

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
import { FormGroup, FormControl, NgControl } from '@angular/forms';

@Directive({
  selector: '[tcInputNoSpace]'
})

export class InputNoSpaceDirective {
  constructor(private elementRef: ElementRef, private control: NgControl) {
  }
  @HostListener('keydown', ['$event'])
  keydownFun(evt) {
    if (evt.key.trim() === '') {
      evt.preventDefault();
    }
  }

  @HostListener('keyup', ['$event', '$event.target'])
  keyupFun(evt, target) {
    if (target.value) {
      this.control.control.setValue(target.value.replace(/(\s*)/g, ''));
    }
  }
};