一般遇到 input 提交内容都会逐个给里面的值去除空格，这是一个重复的劳动力，在 Angular 中可以通过自定义一个指令来解决。
考虑到项目中会有多个组件用到，所以一般会将该指令放到 shared 模块下面，下面简单写下步骤。
- 在 shared 模块中创建一个指令
ng g d shared/directives/input-trim
- 在 shared 模块 exports 中导出该指令
import { InputTrimDirective } from './directives/input-trim.directive';
@NgModule({
declarations: [..., InputTrimDirective],
...
exports: [
...
InputTrimDirective
],
...
})- 编写去除空格指令代码
import { Directive, HostListener } from '@angular/core';
import { NgControl } from '@angular/forms';
@Directive({
selector: '[appInputTrim]'
})
export class InputTrimDirective {
constructor(private control: NgControl) { }
@HostListener('blur', ['$event', '$event.target'])
@HostListener('keydown.enter', ['$event', '$event.target'])
keyupFun(evt, target) {
if (target.value) {
this.control.control.setValue(this.ltrim(target.value));
}
}
ltrim(str) {
return str.replace(/(^\s*)|(\s*$)/g, '');
}
}- 在需要使用该指令的组件所对应的模块中导入 shared 模块
@NgModule({
...
imports: [
SharedModule,
...
]
...
})- 在组件模板中使用指令
<input type="text" [(ngModel)]="inputValue" placeholder="请输入内容！" appInputTrim>测试输入内容后回车或者点击按钮都会自动去除空格了。至此，一个简单的 Angular 指令就写完了
发表评论：