如何創建離子2顯示/隱藏密碼

Question

登錄我想創造這樣使用離子2設計 - >

它是有一個隱藏/顯示密碼登錄功能。

這裏是我的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> 

而這裏的結果 - >http://prntscr.com/gz12xg

這裏是我的.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'); 
    } 

} 

的問題是，眼睛圖標，無法點擊。沒有來自控制檯的日誌。

當我點擊眼睛圖標時，它只允許我從密碼字段輸入。

有人可以幫助我嗎？我只想讓眼睛圖標可點擊。

Answer 1

你可以簡單地把它包裝一個按鈕使其可點擊：

<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> 

使用樣式屬性來控制圖標的大小。

Answer 2

您可以在.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'; 
} 

在.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="passIcon" (click)='hideShowPassword()'></ion-icon> 
</ion-item> 

，這將是您的.scss代碼。根據您的需要更改

.passwordIcon{ 
    font-size:2rem !important; 
    position: relative !important; 
    top: 22px !important; 
    margin: 0 auto !important; 
}