1
votes

Angular 7 attache une seule classe conditionnellement parmi les classes fixes

Ma question est peut-être un élément de base dans Angular.

J'ai donc cette icône:

export class SidenavComponent implements OnInit {

    constructor() {
    }

    // Set to true on hover element
    linkedInHover = false;

    ngOnInit() {
    }

    animateLinkedin() {
        this.linkedInHover = true;
    }

    deanimateLinkedin() {
        this.linkedInHover = false;
    }
}

Je dois y ajouter une classe lorsque je la survole, donc J'ai fait ceci:

 <i class="fab fa-linkedin-in fa-lg"
  (mouseenter)="animateLinkedin()"
  (mouseleave)="deanimateLinkedin()">
</i>

Je dois activer la classe si linkedInHover est défini sur true, tout en conservant les classes actuelles sans aucune condition . p>

Comment puis-je gérer cela car je ne peux apparemment pas faire cela avec [ngClass]?

[EDIT] Je sais quand utiliser le CSS normal : hover , comme je l'ai dit, ce n'est vraiment pas mon besoin car j'utilise une bibliothèque css tierce, donc je n'ai pas écrit la classe que je veux attacher.

typescript angular

4 commentaires

Je pense que vous devriez simplement utiliser le sélecteur : hover de CSS pour cela. Consultez ici pour plus d'informations

Non, ce n'est pas mon besoin en fait, j'obtiens la classe d'une ressource externe.

Et pourquoi [ngClass] ne fonctionne-t-il pas? Comme ceci: [ngClass] = "{'hover-class': linkedInHover}"

Copie possible de nom de classe dynamique dans ngClass dans angular 2

3 Réponses :

0
votes

Bien que vous puissiez le faire avec le pseudo élément : hover , je vais vous expliquer comment faire cela sans ngClass

Vous pouvez faire ce que vous voulez: manière

<div class="fab fa-linkedin-in fa-lg" [class.hover]="linkedInHover"></div>

Mais veuillez utiliser le pseudo élément : hover pour ce que vous faites car utiliser angular pour cela n'est pas nécessaire.

Vous pouvez voir d'autres façons de faire des liaisons dans la documentation sur 'template-syntax' ici

Update

Votre question est une copie de la post

Veuillez formuler vos questions avec un peu plus de précision la prochaine fois, bonne chance!

3 commentaires

J'ai besoin de javaScript pour cela parce que j'obtiens la classe d'une bibliothèque css externe, donc je n'ai pas écrit le contenu de la classe, et dans votre code, vous n'avez pas dit comment puis-je toujours obtenir mes classes normales

@ naspy971 vous pouvez toujours avoir vos autres cours séparément? Voir la réponse mise à jour

@ naspy971 Je vois ce que vous voulez maintenant, voir à nouveau la réponse mise à jour.

0
votes

Utilisez la syntaxe [class.className] comme ceci:

<i 
  class="fab fa-linkedin-in fa-lg" 
  (mouseenter)="animateLinkedin()" 
  (mouseleave)="deanimateLinkedin()"
  [ngClass]="linkedInHover ? 'classNameYouWantToApply': ''">
</i>

Vous pouvez également utiliser [ngClass] comme ceci: p>

<i 
  class="fab fa-linkedin-in fa-lg" 
  (mouseenter)="animateLinkedin()" 
  (mouseleave)="deanimateLinkedin()"
  [class.classNameYouWantToApply]="linkedInHover">
</i>

Mais je pense que vous compliquez trop les choses ici. Vous pouvez simplement utiliser le CSS Preudo-Selector : hover pour obtenir la même chose.

0 commentaires

1
votes

C'est possible avec ngClass

<i class="fab fa-linkedin-in fa-lg" [ngClass]="{'<yourClass>':linkedInHover, '<anotherClass>':!linkedInHover}"

Voir la documentation a > pour plus d'informations.

1 commentaires

Cela fonctionne, mais la [class.bla] = "condition" est bien plus propre.