Использование директивы для добавления класса к элементу хоста

В настоящее время я изучаю Angular 2. Я понял, как использовать Angular Renderer для установки ElementStyle, но теперь я хотел бы использовать метод Renderer:

setElementClass(renderElement: any, className: string, isAdd: boolean) : void

У меня вопрос, как я могу импортировать класс CSS в мою директиву атрибута? Нужно ли конвертировать мой класс CSS в JSON?

Ответ 1

Оригинальный OP спрашивал, как использовать Renderer. Я включил @HostBinding для полноты.

Использование @HostBinding

Чтобы добавить класс к элементу, вы можете использовать @HostBinding

import { Directive, HostBinding} from '@angular/core';

@Directive({
  selector: '[myDirective]',
})
export class MyDirective {

  @HostBinding('class')
  elementClass = 'custom-theme';

  constructor() {
  }
}

Использование @HostBinding с несколькими классами

Чтобы сделать несколько классов более удобными в использовании, вы можете использовать геттер ES6 и объединить классы перед их возвратом:

import { Directive, HostBinding} from '@angular/core';

@Directive({
  selector: '[myDirective]',
})
export class MyDirective {
  protected _elementClass: string[] = [];

  @Input('class')
  @HostBinding('class')
  get elementClass(): string {
      return this._elementClass.join(' ');
  }
  set(val: string) {
      this._elementClass = val.split(' ');
  }

  constructor() {
      this._elementClass.push('custom-theme');
      this._elementClass.push('another-class');
  }
}

Использование Renderer

API более низкого уровня - Renderer2. Renderer2 полезен, когда у вас есть динамический набор классов, которые вы хотите применить к элементу.

Пример:

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[myDirective]',
})
export class MyDirective {

  constructor(private renderer: Renderer2, hostElement: ElementRef) {
    renderer.addClass(hostElement.nativeElement, 'custom-theme');
  }
}

Ответ 2

Почему вы хотите использовать класс Renderer или Renderer2? Предпочтительный способ сделать это в директиве - использовать декоратор @HostBinding.

Пример:

import { HostBinding } from '@angular/core';

@Directive({
    selector: '[myDirective]'
})
export class MyDirective {

    @HostBinding('class')
    className = 'my-directive-css-class';
}

Ответ 3

Пример использования Renderer и ElementRef для добавления класса css к элементу.

@Directive({
   selector: '[whatever]'
})
class WhateverDirective {
   constructor(renderer: Renderer, el: ElementRef) {
       renderer.setElementClass(el.nativeElement, 'whatever-css-class', true);
   }
}

Все-css-класс определен в файле CSS, на который ссылается в HTML