Question

Hy家伙，我试图改变点击图标，但我发现只有jquery的例子。我想知道是否可能只使用css或ngClass，因为我在Angular项目中工作。我正在使用font-awesome 5和Bootstrap 4.下面是我为实现目标而编写的代码。

HTML：

<div class="form-group row">
  <div class="input-group">
    <label for="password" class="col-md-3 col-form-label">Password</label>
    <input type="password" name="password" id="password" #password1 class="col-md-9 form-control" placeholder="Password" [(ngModel)]="password">
    <div class="input-group-append" (click)="changeType(password1, 1)">
      <span class="input-group-text" [ngClass]="toggle1 ? 'fas fa-eye' : 'fas fa-eye-slash'"></span>
    </div>
  </div>
</div>

<div class="form-group row">
  <div class="input-group">
    <label for="c_password" class="col-md-3 col-form-label">Password Confirmation</label>
    <input type="password" name="c_password" id="c_password" #password2 class="col-md-9 form-control" placeholder="Repeat Password" [(ngModel)]="c_password">
    <div class="input-group-append" (click)="changeType(password2, 2)">
      <span class="input-group-text" [ngClass]="toggle2 ? 'fas fa-eye' : 'fas fa-eye-slash'"></span>
    </div>
  </div>
</div>

component.ts：

toggle1: boolean = false;
toggle2: boolean = false;

changeType(password, num){
  if(password.type=="password")
    password.type = "text";
  else
    password.type = "password";

  if(num == 1)
    this.toggle1 = !this.toggle1;
  else
    this.toggle2 = !this.toggle2;
}

我想要实现的是更改点击图标并更改传递给函数的参数类型以显示刚刚写入的密码。

Answer 1

这是工作示例

https://stackblitz.com/edit/angular-5pmn3r?file=app%2Fapp.component.html

<强>更新

以这种方式使用，

{{1}}

Answer 2

我正在为您提供使用css的示例。希望它会帮助你。

HTML

<input type="checkbox" />

CSS

input[type="checkbox"] {
    width: 0;
    height: 0;
    margin: 0;
    border: 0 none;
    padding: 0;
}
input[type="checkbox"]:before {
    content: url('http://placekitten.com/200/210');
    display: block;
    width: 200px;
    height: 200px;
    overflow: hidden;
}
input[type="checkbox"]:checked:before {
    content: url('http://placekitten.com/210/220');
}

单击使用css或ngClass更改图标

2 个答案:

HTML

CSS