Question

我想根据用户点击显示/隐藏密码文本。但我收到以下错误说：

export class App {
    password = "secret";
    show = false;

    @ContentChild(ShowHideInput) input: ShowHideInput;

    constructor(){}

    toggleShow()
    {
        this.show = !this.show;
        console.log(this.input); //undefined
        if (this.show){
            this.input.changeType("text");
        }
        else {
            this.input.changeType("password");
        }
    }
}

我创建的以下plunker链接。

https://plnkr.co/edit/2GK79PuPtRQNmoUbF6xC?p=preview

Answer 1

这是更好的答案。检查以下内容：

<强>输入

<input [type]="show ? 'text' : 'password'" />

点击操作

<button (click)="password()">Show</button>

<强>组件

// variable
show: boolean;

constructor() {
   // initialize variable value
   this.show = false;
}

// click event function toggle
password() {
    this.show = !this.show;
}

Answer 2

您需要使用ViewChild()代替ContentChild()

@ViewChild(ShowHideInput) input: ShowHideInput;

check your plunk

ContentChild()用于匹配已转换内容。例如<ng-content></ng-content>

内的内容

Answer 3

您还可以快速而肮脏地在模板中完成所有这些操作。

<input #x type="password">
<button (click)="x.type=x.type=='password'?'text':'password'"></button>

Answer 4

我发现在问题的方法中，功能直接在<input>所在的组件中实现，而且只是为了记录我想要分享更优雅的方法 - 创建组件为此目的

检查demo plunkr HERE，对其他人有用。

干杯！

Answer 5

你可以这样做：

在你的App类中。

   _show = false
   _pwdType = 'pwd'

   toggleShow() {

      this._show = !this._show
      this._pwdType = this._show ? 'text' : 'password'

   }//toggleShow

在你的HTML中

 <input [type]="_pwdType" class="form-control" ...etc">

说过我喜欢@ codtex的答案更好

Answer 6

<input [type]="show_button ? 'text' : 'password'">
<i [class]="show_eye ? 'fa fa-eye' : 'fa fa-eye-slash'" (click)="showPassword()"> // Modify style as you need

 // variable
  show_button: Boolean = false;
  show_eye: Boolean = false;

//Function
showPassword() {
    this.show_button = !this.show_button;
    this.show_eye = !this.show_eye;
  }

Answer 7

在您的html中：

<div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" #password-field>
    <span (click)="password-field.type=password-field.type=='password'?'text':'password'" 
    class="fa fa-fw field-icon toggle-password"
        [ngClass]="(password-field.type=='password')?' fa-eye':' fa-eye-slash'"></span>
</div>

在您的css或sass中

.field-icon {
  float: right;
  left: -15px;
  margin-top: -25px;
  position: relative;
  z-index: 2;
}

使用angular2显示/隐藏密码文本

7 个答案: