使用过jQuery的童鞋，想要制作一个清空input内容的图标按钮是非常简单的事情，但是今天我要来说下angular2+版本中制作如此一个功能，远远比jQuery简单得多。而且是超级简单，根本不用写typescript代码，仅在html模板中就可以直接实现，当然我们也可以通过typescript的代码来进行实现，大同小异啊！
先来看实现后的大致功能效果，如下图：
要制作这么一个功能，使用angular制作其实并不困难，不过要在css中下功夫，而js逻辑是很简单的事情，并且angular中实现并无需写js逻辑。
关于css部分，请自行进行编写，这里我只实现功能，css部分实现的思想也很简单，利用position定位来对按钮或者图标进行定位到input的右边即可实现。
1、angular直接在模板中实现清空input的方法。
清空input
用户名:X
密 码:X
以上代码中就已经完全实现了这个清空的方法，大家可以在angular中运行试试，并且无需写js代码。很简单的就实现了，这就是angular强大的事件驱动。
2、使用angular的typescript来进行实现
其中我们要使用到ViewChild和ElementRef来进行操作，ViewChild使用很方便，就像Java中的注解一样方便。
1）、首先导入相关功能模块
import { Component, ViewChild, ElementRef } from '@angular/core';
2）、模板文件
清空input
用户名:X
密 码:X
3）、获取相关以#绑定的input
@ViewChild('name') name:ElementRef
@ViewChild('pwd') pwd:ElementRef
4）、编写相关click事件的清空方法
clear_name(){
this.name.nativeElement.value = ''
}
clear_pwd(){
this.pwd.nativeElement.value = ''
}
怎么样？这两个方法中一眼就可以看出来，第一种方法是最简单的，不过第二种方法可以为我们提供更多的使用场景。总体来说，angularJS是非常不错的事件驱动JS库。下面是我实现后的效果，大家可以看一看！
