typescript 如何使用显示/隐藏密码在 ionic 2 中创建登录
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46815831/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create login in ionic 2 with show/hide password
提问by JSN
I wanted to create a design like this using ionic 2 -> https://codepen.io/Floky87/pen/bVopyZ
我想使用 ionic 2 -> https://codepen.io/Floky87/pen/bVopyZ创建这样的设计
Which is a login functionality that has a hide/show password.
这是具有隐藏/显示密码的登录功能。
Here's my HTML code
这是我的 HTML 代码
<ion-header>
<ion-navbar>
<ion-title>Login</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-item>
<ion-label floating primary>Username</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label floating primary>Password</ion-label>
<ion-input type="password"></ion-input>
<ion-icon name="eye" item-right (click)="showHide()"></ion-icon>
</ion-item>
</ion-content>
And Here's the result -> http://prntscr.com/gz12xg
这是结果 - > http://prntscr.com/gz12xg
Here's my .ts code
这是我的 .ts 代码
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad LoginPage');
}
showHide() {
console.log('hi');
}
}
The Problem is, the eye icon, is not clickable. No log from the console.
问题是，眼睛图标不可点击。没有来自控制台的日志。
When I click the eye icon, it only allows me to input from the password field.
当我单击眼睛图标时，它只允许我从密码字段输入。
Anybody can help me? I just want the eye icon to be clickable.
任何人都可以帮助我吗？我只希望眼睛图标可点击。
回答by Azam Alvi
You can do like below
in your .tsfile write this code
你可以像下面这样在你的.ts文件中写下这段代码
passwordType: string = 'password';
passwordIcon: string = 'eye-off';
hideShowPassword() {
this.passwordType = this.passwordType === 'text' ? 'password' : 'text';
this.passwordIcon = this.passwordIcon === 'eye-off' ? 'eye' : 'eye-off';
}
in your .htmlwrite this
在你.html写这个
<ion-item>
<ion-label floating>Password</ion-label>
<ion-input formControlName="password" [type]="passwordType" clearOnEdit="false"></ion-input>
<ion-icon item-end [name]="passwordIcon" class="passwordIcon" (click)='hideShowPassword()'></ion-icon>
</ion-item>
and this will be your .scsscode. Change according to your need
这将是您的.scss代码。根据您的需要更改
.passwordIcon{
font-size:2rem !important;
position: relative !important;
top: 22px !important;
margin: 0 auto !important;
}
回答by David
You can simply wrap it in a button to make it clickable:
您可以简单地将其包装在一个按钮中以使其可点击：
<ion-item>
<ion-label floating primary>Password</ion-label>
<ion-input type="password"></ion-input>
<button ion-button clear item-end (click)='showHide()' style="height:32px;">
<ion-icon name="eye" style="font-size:32px;"></ion-icon>
</button>
</ion-item>
Use the style attributes to control the size of the icon.
使用样式属性来控制图标的大小。
回答by Pavan Raju
public type = 'password';
public showPass = false;
showPassword() {
this.showPass = !this.showPass;
if(this.showPass){
this.type = 'text';
} else {
this.type = 'password';
}
}
<ion-item class="i2"no-lines>
<ion-input type="{{type}}" name="password" [(ngModel)]="password" placeholder="Password" style="width: 40px;" no-lines>
</ion-input>
<button *ngIf="!showPass" ion-button clear color="dark" type="button" item-right (click)="showPassword()">
<ion-icon name="eye" style="font-size:25px;"></ion-icon>
</button>
<button *ngIf="showPass" ion-button clear color="dark" type="button" item-right (click)="showPassword()">
<ion-icon name="eye-off" style="font-size:25px;"></ion-icon>
</button>
</ion-item>
