는 표시/숨기기 암호

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> 

은 스타일 아이콘의 크기를 제어하는 ​​속성을 사용합니다. 당신은 당신의 .ts 파일에 아래와 같이 할 수

Answer 2

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

이 코드

passwordType: string = 'password'; 
passwordIcon: string = 'eye-off'; 

hideShowPassword() { 
    this.passwordType = this.passwordType === 'text' ? 'password' : 'text'; 
    this.passwordIcon = this.passwordIcon === 'eye-off' ? 'eye' : 'eye-off'; 
} 

를 작성하고이 당신의 .scss 코드가 될 것입니다. 필요에 따라 변경하십시오

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