À l'aide d'une directive pour ajouter une classe à l'élément hôte
Je suis actuellement en apprentissage Angulaire 2. J'ai compris comment utiliser l'angle de Renderer
pour définir une ElementStyle
, mais maintenant je voudrais utiliser le Renderer
méthode:
setElementClass(renderElement: any, className: string, isAdd: boolean) : void
Ma question est comment puis-je importer une classe CSS à mon attribut de la directive?
Dois-je convertir mes CSS de la classe JSON?
Qu'entendez-vous par l'importation d'une classe css? className est une chaîne donc pourquoi vous devez charger ou de convertir ou de l'importation de la classe css?
OriginalL'auteur Daniel Hoppe Alvarez | 2016-09-22
Vous devez vous connecter pour publier un commentaire.
Original OP a été demandé comment utiliser Convertisseur. J'ai inclus le @HostBinding pour l'exhaustivité.
À L'Aide De @HostBinding
Pour ajouter une classe à un élément, vous pouvez utiliser @HostBinding
À l'aide de @HostBinding avec plusieurs classes
De faire de multiples classes plus confortable à utiliser, vous pouvez utiliser l'ES6 de lecture et de rejoindre les classes d'ensemble avant de les retourner:
À L'Aide De Convertisseur
Le plus bas niveau de l'API est Render2. Renderer2 est utile lorsque vous avez un ensemble dynamique de classes que vous souhaitez appliquer à un élément.
Exemple:
Pour plusieurs classes, vous devez effectuer une boucle. Si vous jetez un oeil à la source vous verrez Angulaire appelle la classList.ajouter de la méthode. Bien que cette méthode native prise en charge de plusieurs arguments, l'Angulaire seulement la mise en œuvre permet de passer un nom de classe à la fois.
OriginalL'auteur cgatian
Pourquoi voudriez-vous d'utiliser le moteur de Rendu ou Renderer2 classe? La meilleure façon de le faire dans une directive est d'utiliser le @HostBinding décorateur.
Exemple:
Je pense que c'est utile seulement pour remplacer complètement les classes qui peuvent déjà être définis dans le code HTML. Comment aurais-je add une classe avec cette méthode? Convertisseur semble plus souple.
Cette syntaxe est mieux :
@HostBinding('class.isPlaying') class_isPlaying = true;
(voir ce stackoverflow.com/a/35183074/16940). Il permet de basculer entre les classes plutôt que de simplement l'anéantissement de l'ensemble de l'attribut.OriginalL'auteur csnate
Exemple de comment utiliser le moteur de Rendu et de ElementRef pour ajouter de la classe css à l'élément.
L'autre-css-classe est définie dans un fichier css, qui est référencé dans le html
Bon, ce que vous pouvez faire est de définir la classe dans le fichier css qui vous référencer en html, donc, de cette façon, il sera appliqué à l'élément.
Rendu de la classe est maintenant obsolète. Utiliser les Renderer2 à la place.
OriginalL'auteur jaguwalapratik