如何模糊 angular 中的 span 属性

Question

我想在每次单击复选框时模糊具有测试 "Blur me" 的 span 元素

html 文件

 <input (click)="clickbox()" type="checkbox">
 <span>
   <span class="blur"> Blur Me </span>
   <input [disabled]="ischecked" type="month">
 </span>

TS文件

ischecked = true;
clickbox() {
  console.log(this.ischecked);
  this.ischecked = !this.ischecked;
}

Answer 1

您可以像这样使用 ngClass 指令来切换 class

 <span [ngClass]="{blur:ischecked }" > Blur Me </span>

Answer 2

在你的html中：

<span [class.blurred]="isChecked">
</span>

并使用以下代码将 class 添加到样式中：

.blurred {
    color: darkgrey;
}

Answer 3

更新代码中的这一行

<span class="blur"> Blur Me </span>

到这个

<span [ngClass]="{'blur': ischecked}"> Blur Me </span>

Answer 4

试试这个 component.html

<input (click)="clickbox()" type="checkbox">
 <span>
   <span [ngClass]="(!ischecked) ? '': 'blur'"> Blur Me </span>
   <input [disabled]="ischecked" type="month">
 </span>

component.css

.blur {
  opacity: 0.5;
}

component.ts

clickbox() {
  console.log(this.ischecked);
  this.ischecked = !this.ischecked;
}

如何模糊 angular 中的 span 属性

How to blur the span attribute in angular

blur

angular