Угловой Renderer2 не может добавить класс

Question

addClass метод Renderer не работает, если элемент имеет класс с привязкой

Некоторые HTML

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

Внутри addClassDir

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

Я знаю, что class="my-class-{{smth}}" - это не англоязычный способ, но я не знаю, как люди используют мою директиву.Это должно работать в любом случае, но это не так.Какой самый правильный способ сделать это?

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>

Answer 2

Добавьте ваш компонент

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

Добавьте ваш шаблон

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

ИЛИ

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

Answer 3

Вам не нужен рендерер, чтобы добавить класс. Воспользуйтесь синтаксисом NgClass и директивой HostBinding.

Демонстрация Stackblitz

export class MyDirective {

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

  constructor() { }

}