css - Angular Renderer2 无法添加类

Question

addClass渲染器的方法在元素具有绑定类的情况下不起作用

一些 HTML

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

里面addClassDir

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

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

标签： cssangularangular-directive

Answer 1

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

1. 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';
}

2. 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>

3. 属性绑定

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