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

我想根据用户单击显示/隐藏密码文本。但我得到了以下错误，即：

下面是我创建的plunker链接

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

---

您需要使用

ViewChild（）

而不是

ContentChild（）

---

ContentChild（）

用于在转包内容内进行匹配。e、 g.

中的内容我看到，在问题的方法中，功能直接在

所在的组件中实现，我想分享一种更优雅的方法-为此创建一个组件

检查演示plunkr，可以对其他人有用

---

干杯

您可以这样做：

在你的应用程序类中

   _show = false
   _pwdType = 'pwd'

   toggleShow() {

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

   }//toggleShow

在html中

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

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

输入

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

// variable - default false
show: boolean = false;

constructor() {
}

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

---

您还可以在模板中以一种快速而肮脏的方式完成所有这些操作

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

//根据需要修改样式
//变数
显示按钮：布尔=假；
显示眼睛：布尔=假；
//作用
showPassword（）{
this.show_按钮=！this.show_按钮；
this.show_eye=！this.show_eye；
}

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

//在HTML中
显示密码
//在TS文件中
passType:string='password'；
changePasswordType（）{
if（this.passType==“password”）{
this.passType='text'
}否则{
this.passType=='password'
}
}

不客气@vishnu。如果您对答案感到满意，请接受答案，并将问题标记为已回答。请在您的答案中添加一些解释

// variable - default false
show: boolean = false;

constructor() {
}

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

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

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

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

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

//In HTML
<div>
<input [type] = "passType" placeholder="password">
</div>

<input type = "checkbox" (click)="changePasswordType()">Show Password

//In TS file
passType: string = 'password';

changePasswordType(){
if(this.passType== 'password'){
this.passType= 'text'
}else{
this.passType== 'password'
}
}