Question

我刚刚开始使用angular5进行编码，我遇到了删除click事件中所有类的问题。我们在Jquery中有类似的东西

$('.m-active').removeClass('m-active');

我正在寻找angular2 +（Typescript）

中的替代品

Answer 1

在Angular 2+中更好地使用绑定而不是jQuery

<div [class.my-class]="isMyClass">div 1</div>
<div [class.my-class]="isMyClass">div 2</div>
<button (click)="isMyClass = !isMyClass">toggle</button>

export class MyComponent {
  isMyClass:boolean = true;
}

Answer 2

你可以使用document.querySelector all去除类 - 在下面 - 我有两个div - iniitally设置为红色/绿色文本，但使用querySelectorAll - 我从div中删除红色类。

function toggleRedClass() {
var redDivs = document.querySelectorAll('.red');

if (redDivs.length) {
  for(i=0;i<redDivs.length;i++) {
    redDivs[i].classList.remove('red');
    redDivs[i].classList.add('black')
  }
} else {
  var blackDivs = document.querySelectorAll('.black');
   for(i=0;i<blackDivs.length;i++) {
   blackDivs[i].classList.remove('black')
    blackDivs[i].classList.add('red')
  }
  }
}

.red {color:red}
.green {color:green}

<div class="red">test</div>
<div class="green">test1</div>

<button type="button" onclick="toggleRedClass()">Click to toggle the red class</button>

Answer 3

您可以创建如下指令：

https://plnkr.co/edit/eKokX0IrsIWIuY9ACUZ4?p=preview

@Directive({
  selector: '[class]'
})
export class ClassDirective {
  @Input('class') claz;
  private _claz;
  public set claz(claz){
     this._claz = claz;
  }
  public get claz(){
    return this._claz;
  }
  @HostBinding('class') get hostClass(){
    return this.claz;
  }
  constructor(){
    console.log('***');
  }

  ngOnInit(){
    console.log('this.classz',this.claz);
    setTimeout(()=>{

      this.claz= this.claz.replace('milad','');
    },2000)
  }
}

我知道它并不能完全符合您的要求，但我们的想法是创建一个名为class的选择器，然后您可以访问应用程序中的所有类（显然这个组件应该是在你的模块中声明。）

然后你可以在该指令中做任何你喜欢的事情，你可以使用主机绑定来覆盖类和诸如此类的东西。

您可以为某个按钮创建一个事件监听器，将事件监听器的调用传递给该指令，让它做任何你想做的事。

删除角度为2 +

3 个答案: