angular - Renderer.addClass() 上有多个类

Question

如何在方法 Renderer2.addClass() 上添加多个类；

例子：

this.renderer.addClass(this.el.nativeElement, 'btn btn-primary')

当我尝试这样做时，我得到了错误：

ERROR DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('btn btn-primary') contains HTML space characters, which are not valid in tokens.
    at EmulatedEncapsulationDomRenderer2.addClass

Answer 1

不幸this.renderer.addClass()的是只接受一个没有空格的字符串。

您可以做的是使用原生元素的classList添加多个类：

this.el.nativeElement.classList.add('btn', 'btn-primary');

Answer 2

好吧，也许 Renderer2addClass()方法不支持它，但这可以通过使用 JavaScript 来实现 :)

  const myClassess = 'col-12 col-sm-6 col-md-4';
  myClassess.split(' ').forEach((className: string) => {
      this.renderer2.addClass(this.el.nativeElement, className);
  });

Answer 3

您可以使用this.renderer.setAttribute()

伪：

this.renderer.setAttribute(element, 'class', 'className1 className2 className3');

例子：

renderer.setAttribute(cropBottomLine, 'class', 'crop-line crop-bottom-line');