web-dev-qa-db-fra.com

Utilisation d'une directive pour ajouter une classe à un élément hôte

J'apprends actuellement Angular 2. J'ai compris comment utiliser le Angular Renderer pour définir un ElementStyle, mais maintenant J'aimerais utiliser la méthode Renderer:

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

Ma question est comment puis-je importer une classe CSS à ma directive attribut? Dois-je convertir ma classe CSS en JSON?

angularangular2-directives
24
Daniel Hoppe Alvarez

Original OP demandait comment utiliser Renderer. J'ai inclus le @HostBinding pour la complétude.

Utiliser @HostBinding

Pour ajouter une classe à un élément, vous pouvez utiliser @ HostBinding

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

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

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

  constructor() {
  }
}

Utiliser @HostBinding avec plusieurs classes

Pour rendre l'utilisation de plusieurs classes plus confortable, vous pouvez utiliser le getter ES6 et joindre les classes ensemble avant de les renvoyer:

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');
  }
}

Utiliser le moteur de rendu

L'API de plus bas niveau est Render2 . Renderer2 est utile lorsque vous souhaitez appliquer un ensemble dynamique de classes à un élément.

Exemple: 

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');
  }
}
58
cgatian

Pourquoi voudriez-vous utiliser la classe Renderer ou Renderer2? La méthode recommandée pour ce faire dans une directive consiste à utiliser le décorateur @ HostBinding .

Exemple:

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

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

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

Exemple d'utilisation de Renderer et ElementRef pour ajouter une classe css à un élément.

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

La classe what-css est définie dans un fichier css, référencé en html

5
jaguwalapratik