Angular 2將同一單擊事件綁定到多個元素並更改類

Question

僅當我具有多個具有相同名稱的（單擊）事件時，才能通過僅通過該元素的（單擊）事件來更改其類？ 這可能嗎？ （請參見下面的代碼）

還是應該區分其（點擊）事件名稱？ 這不是多余的嗎？

HTML

<mat-form-field class="col-md-12">
   <label><i class="fa fa-lock"></i> CURRENT PASSWORD</label>
   <input matInput type="password" name="current_password">
   <i class="fa right" [ngClass]="{'fa-eye': !displayPassword, 'fa-eye-slash': displayPassword}" (click)="showPassword($event)"></i>
</mat-form-field>
<mat-form-field class="col-md-12">
   <label><i class="fa fa-lock"></i> NEW PASSWORD</label>
   <input matInput type="password" name="new_pass">
   <i class="fa right" [ngClass]="{'fa-eye': !displayPassword, 'fa-eye-slash': displayPassword}" (click)="showPassword($event)"></i>
</mat-form-field>
<mat-form-field class="col-md-12">
   <label><i class="fa fa-lock"></i> CONFIRM NEW PASSWORD</label>
   <input matInput type="password" name="con_new_pass">
   <i class="fa right" [ngClass]="{'fa-eye': !displayPassword, 'fa-eye-slash': displayPassword}" (click)="showPassword($event)"></i>
</mat-form-field>

TS

public displayPassword = false;

showPassword(event){
  if(event.displayPassword == false){
    event.displayPassword = true;
  }else{
    event.displayPassword = false;
  }
}

Answer 1

使用不同的布爾值
這應該工作：

<mat-form-field class="col-md-12">
   <label><i class="fa fa-lock"></i> CURRENT PASSWORD</label>
   <input matInput type="password" name="current_password">
   <i class="fa right" [ngClass]="{'fa-eye': !displayCurrentPassword, 'fa-eye-slash': displayCurrentPassword}" (click)="displayCurrentPassword=!displayCurrentPassword"></i>
</mat-form-field>
<mat-form-field class="col-md-12">
   <label><i class="fa fa-lock"></i> NEW PASSWORD</label>
   <input matInput type="password" name="new_pass">
   <i class="fa right" [ngClass]="{'fa-eye': !displayNewPassword, 'fa-eye-slash': displayNewPassword}" (click)="displayNewPassword=!displayNewPassword"></i>
</mat-form-field>
<mat-form-field class="col-md-12">
   <label><i class="fa fa-lock"></i> CONFIRM NEW PASSWORD</label>
   <input matInput type="password" name="con_new_pass">
   <i class="fa right" [ngClass]="{'fa-eye': !displayConfirmPassword, 'fa-eye-slash': displayConfirmPassword}" (click)="displayConfirmPassword=!displayConfirmPassword"></i>
</mat-form-field>

在TS中：

displayConfirmPassword = false;
displayNewPassword=false;
displayCurrentPassword=false;

Answer 2

您在showPassword方法中具有event ，因此可以完全控制單擊的元素，可以使用jQuery將類添加/刪除到元素中

if($(event.target).hasClass('fa-eye-slash')){
  $(event.target).removeClass('fa-eye-slash').addClass('fa-eye');
}
else{
  $(event.target).removeClass('fa-eye').addClass('fa-eye-slash');
}