Angular 5 使用通配符删除 class

Question

我有一个输入属性 class :

<input class="color b1 b2 b3" text="text">

我想删除颜色后的所有 classes，以便我可以添加其他 classes。但是如何使用 .renderer.removeClass 使用通配符呢？到目前为止，我这样做是多余的而且不干净

// remove class
this.renderer.removeClass(this.elRef.nativeElement.querySelector(".color"), 'b1');
this.renderer.removeClass(this.elRef.nativeElement.querySelector(".color"), 'b2');
this.renderer.removeClass(this.elRef.nativeElement.querySelector(".color"), 'b3');
// add class
this.renderer.addClass(this.elRef.nativeElement.querySelector(".color"), 'b4');

我试过类似的方法但没有成功:

 this.renderer.removeClass(this.elRef.nativeElement.querySelector(".color"), 'color*');

Answer 1

您可以删除与 regex 匹配的元素的所有 classes，如下所示：

let el = this.elRef.nativeElement.querySelector(".color");
let regex = /^b\d$/;
let classes = el.getAttribute('class').split(' '); // get all classes
  classes.forEach((cl) => {
       if(cl.match(regex)) {  // match classes b1, b2, b3....
         this.renderer.removeClass(el, cl);
       }
  });
this.renderer.addClass(el, 'b4');

看到这个工作code

Angular 5 使用通配符删除 class

Angular 5 remove class using wildcard

renderer

angular

angular5