1、什么是指令?
官方文档的解释:指令是为 Angular 应用程序中的元素添加额外行为的类。使用 Angular 的内置指令,你可以管理表单、列表、样式以及要让用户看到的任何内容。
2、指令的分类
1)组件 —— 带有模板的指令。这种指令类型是最常见的指令类型。
2)属性型指令 —— 更改元素、组件或其他指令的外观或行为的指令。
3)结构型指令 —— 通过添加和删除 DOM 元素来更改 DOM 布局的指令。
内置属性指令:内置指令只会使用公开 API。它们不会访问任何无法被其它指令访问的私有 API。
常见的属性指令有:
常见的结构指令有:
自定义组件,去掉表单中的输入框的空格
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, ''));
}
}
};
<input type="text" tInputText formControlName="destIp" tcInputNoSpace/>