Angular2-自定义指令@Directive

​我们按照下面的步骤一步一步带着思考去学习，相信很容易就能掌握Angular自定义指令,废话不多少，开始学习，你准备好来吗？

概述

所谓指令就是用于改变一个DOM元素的外观或行为，Angular2为我们封装了很多的内置指令，项目中也无时无刻不在使用指令,Angular2中有三类指令

(1).结构型指
通过添加和移除 DOM 元素改变 DOM 布局的指令，例如：Ngif和Ngfor
(2).属性型指令
改变元素、组件或其它指令的外观和行为的指令，例如：NgClass
(3).组件
组件是一个模板指令，相信大家都很熟悉

今天我们来讲讲自定义指令，通过一个案例来学习自定义属性指令，需求是：在输入框输入值时，如果值中包含空格，我们把空客去掉,最终的效果是这样的

第一步、创建自定义指令

import {Directive, ElementRef, HostListener} 
from "@angular/core";

@Directive({
  selector: '[input-trim]'
})
export class InputTrimDirective {
  constructor(public elementRef: ElementRef) {
  }
  @HostListener('keyup', ['$event.target'])
  keyupFun(evt) {
    if (evt.value) {
      this.elementRef.nativeElement.value = evt.value.trim();
    }
  }
}

我们通过import从core库中导入Directive,HostListener,ElementRef的引入,下面我们分别来看看的作用。
Directive
用于@Directive装饰器功能，用于定义这个class是一个指令，通过@Directive修饰这样就拥有了指令的功能，我们在元组中声明selector属性值为[input-trim]，方括号的写法表示是一个属性指令 还有以下几种写法：

 element-name： 使用元素名称选择
 .class：                使用类名选择
 [attribute]：         使用属性选择
 [attribute=value]：使用属性和值选择
 :not(sub_selector)：只有当元素与sub_selector不匹配时才选择
 selector1,selector2：选择择selector1或selector2 这里我们采用属性的方式指定选择器。

这里我们采用属性的方式指定选择器，在页面的使用是这样的

@Directive({
  selector: '[input-trim]'
})

再模版中使用的时候 直接写input-trim

type="text" id="name" input-trim>

如果你使用类名选择是这样的

type="text" id="name" class="input-trim">

后面依次类推

HostListener

HostListener 是属性装饰器，用来为宿主元素添加事件监,类似于我们原生JavaScript的addEventListener。 这里我们监听了keyup事件（还可以定义原生JavaScript中的其他事件），当表单中有输入的时候我们就会调用方法，传递了一个$event对象进去，后面紧跟我们触法keyup事件的方法体

@HostListener('keyup', ['$event.target'])
keyupFun(evt) {
  if (evt.value) {
    this.elementRef.nativeElement.value = evt.value.trim();
  }
}

ElementRef（注意：需要在构造函数中注入进去）
用于获取获取DOM节点相关的属性
这里我们当我们在页面表单输入的时候，会调用keyupFun方法，首先判断是否有值输入，有的情况下，我们通过传递进来的evt获取表单的value值，在调用trim()方法去除空格，赋值给elementRef.nativeElement.value渲染到页面

第二步、在app.module声明
我们的指令写好之后还要在app.module的declarations中声明才能生效

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {AppComponent} from './app.component';
import {InputTrimDirective} from "./direcitve/input-trim.directive";

@NgModule({
  declarations: [
    AppComponent,
    InputTrimDirective 
  ],
  imports: [
    BrowserModule,
    FormsModule,
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

第三步、在模板文件中引用指令

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `姓名  
             `,
})
export class AppComponent {
  title = 'app works!';
}

第四步、页面展示

扩展Host
这里如果我们不采用HostListener属性装饰器来监听事件，我们可以在指令的 metadata 信息中，设定宿主元素的事件监听信息，具体示例如下：

import {Directive, ElementRef, HostListener} from "@angular/core";

@Directive({
  selector: '[input-trim]',
  host: {
    '(keyup)': 'keyupFun($event.target)'
  }
})
export class InputTrimDirective {
  constructor(public elementRef: ElementRef) {
  }

  keyupFun(evt) {
    if (evt.value) {
      this.elementRef.nativeElement.value = evt.value.trim();
    }
  }
}

这种方式的实现效果跟上面是一样

这里不仅可以是监听事件，还可以自定义属性，看看下面代码

import {Directive} from "@angular/core";

@Directive({
  selector: '[input-trim]',
  host: {
    'role-data': 'hello world'
  }
})
export class InputTrimDirective {

}

这里我们自定义了一个属性 role-data，对应值为 hello world（这里为了演示，此属性没有任何意义），再看看页面input表单中就会有一个role-data属性，看下面图片

个人学习心得，大神路过 ，不喜勿喷
有问题加我微信提问或者留言