Renderer.addClass() 上有多个 class

Question

如何在方法 Renderer2.addClass();

上添加多个 class

示例：

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

嗯，也许 Renderer2 addClass() 方法不支持它，但这可以通过使用 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');

Renderer.addClass() 上有多个 class

More than one class on Renderer.addClass()

angular2-directives

angular

angular-renderer2

angular9