角度 5 使用通配符删除类

Question

>我有一个带有类的输入属性：

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

我想删除颜色后的所有类，以便我可以添加其他类。但是如何使用 .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 = /^bd$/;
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');

请参阅此工作代码