angular2--input框实现密码眼睛切换

实现效果如下：

一、html

<ons-page>
	<ons-toolbar>ons-toolbar>
	<div class="background">div>
	<div class="content">
		<div class="r-psw-cnt">
			
			<input type="{{pswType}}"  placeholder="Password *" [(ngModel)]="PassWord" />    
			<img src="{{watch}}" class="r-psw-eye" (click)="changeType()" />
		div>
	div>
ons-page>

二、ts

import { Component, OnsNavigator, ViewChild, OnDestroy } from 'ngx-onsenui';
import { AfterViewInit, Params, OnInit } from 'ngx-onsenui';

@Component({
	selector: 'ons-page[tab2]',
	templateUrl: './tab2.html',
	styleUrls: ['./tab2.css'],
})

export class Tab2 {
	PassWord: any; //登录密码
	watch: string = './assets/img/pic/hidepw.png'; //显示密码
	pswType: any = 'password'; //密码类型

	constructor(private navigator: OnsNavigator) {}

	ngOnInit() {}

	changeType() {
		if(this.watch == './assets/img/pic/showpw.png') {
			this.watch = './assets/img/pic/hidepw.png';
			this.pswType = 'password';
		} else {
			this.watch = './assets/img/pic/showpw.png'
			this.pswType = 'text';
		}
	}
}

三、css

.r-psw-cnt {
	position: relative;
}

.r-psw-eye {
	position: absolute;
	width: 20px;
	vertical-align: middle;
	top: 18px;
	right: 18px;
}

input{
	width: 100%;
	padding: 0 15px;
	font-size: 16px;
	line-height: 48px;
	box-sizing: border-box;
	background: #FFFFFF;
}