Question

如果元素具有绑定类，则Renderer的

addClass方法不起作用

一些HTML

<div addClassDir class="my-class-{{smth}}"></div>

在addClassDir内

ngOnInit() {
    this.renderer.addClass(this.elementRef.nativeElement, 'new-class');
}

我知道class="my-class-{{smth}}"不是Angular的方式，但是我不知道人们如何使用我的指令。无论如何，它应该可以工作，但不能。最正确的方法是什么？

Answer 1

您不需要渲染器来添加类。利用NgClass语法和HostBinding指令。

Stackblitz Demo

export class MyDirective {

  @HostBinding('class.my-directive-class') customClass = true;

  constructor() { }

}

Answer 2

很少有正确的方法可以做到这一点。这取决于您要实现什么。

HostBinding指令 https://angular.io/api/core/HostBinding

export class MyComponent {
  @HostBinding('class.valid') get valid() { return this.control.valid; }
  @HostBinding('class.my-class') myClass = true;
  @HostBinding('class') class = 'box';
}

NgClass https://angular.io/api/common/NgClass

<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

属性绑定

<div [class.active]="isActive">
  ...
</div>

Answer 3

添加您的组件

isTrueNewClass = false;
ngOnInit() {
    this.isTrueNewClass = true;
}

您的模板

<some-element [ngClass]="{'new-class new-class2' : isTrueNewClass }">...</some-element>

OR

<div class="prevclass1 prevclass2" [ngClass]="{'new-class new-class2' : isTrueNewClass }">...</div>

Angular Renderer2无法添加类

3 个答案: