angular2中如何制作如同input search的清空功能

使用过jQuery的童鞋,想要制作一个清空input内容的图标按钮是非常简单的事情,但是今天我要来说下angular2+版本中制作如此一个功能,远远比jQuery简单得多。而且是超级简单,根本不用写typescript代码,仅在html模板中就可以直接实现,当然我们也可以通过typescript的代码来进行实现,大同小异啊!
先来看实现后的大致功能效果,如下图:

input清空按钮
input清空按钮

要制作这么一个功能,使用angular制作其实并不困难,不过要在css中下功夫,而js逻辑是很简单的事情,并且angular中实现并无需写js逻辑。
关于css部分,请自行进行编写,这里我只实现功能,css部分实现的思想也很简单,利用position定位来对按钮或者图标进行定位到input的右边即可实现。
1、angular直接在模板中实现清空input的方法。

<div>
    <h1>清空input</h1>
   
    用户名:<input type="text" name="name" #name placeholder="输入用户名"><span (click)="name.value=''">X</span>
    <br>
    密&nbsp;&nbsp;&nbsp;码:<input type="password" name="pwd" #pwd><span (click)="pwd.value=''">X</span>
  </div>

以上代码中就已经完全实现了这个清空的方法,大家可以在angular中运行试试,并且无需写js代码。很简单的就实现了,这就是angular强大的事件驱动。
2、使用angular的typescript来进行实现
其中我们要使用到ViewChild和ElementRef来进行操作,ViewChild使用很方便,就像Java中的注解一样方便。
1)、首先导入相关功能模块

import { Component, ViewChild, ElementRef } from '@angular/core';

2)、模板文件

<div>
    <h1>清空input</h1>
    用户名:<input type="text" name="name" #name placeholder="输入用户名"><span (click)="clear_name()">X</span>
    <br>
    密&nbsp;&nbsp;&nbsp;码:<input type="password" name="pwd" #pwd><span (click)="clear_pwd()">X</span>
  </div>

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库。下面是我实现后的效果,大家可以看一看!

angular-input清空功能
angular-input清空功能

发表评论

电子邮件地址不会被公开。 必填项已用*标注