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