代码之家 › 专栏 › 技术社区 › naspy971

Angular 7在固定类中有条件地只附加一个类

typescript angular

0

naspy971 · 技术社区 · 7 年前

我有一个图标:

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

export class SidenavComponent implements OnInit {

    constructor() {
    }

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

    ngOnInit() {
    }

    animateLinkedin() {
        this.linkedInHover = true;
    }

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

如果linkedInHover设置为true,我需要激活该类, 而不带任何条件地保留当前类 .

既然[ngClass]似乎无法做到这一点,我怎么能做到这一点呢?

[编辑] 我知道什么时候使用普通的CSS

3 回复 | 直到 7 年前

1

M M 7 年前

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

看见 documentation

2

0

SiddAjmera 7 年前

使用 [class.className] 语法如下:

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

你也可以使用 [ngClass] 这样地:

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

但我觉得你把事情搞得太复杂了。您可以简单地使用CSS Preudo选择器 :hover 实现同样的目标。

3

0

realappie 7 年前

而你可以用 :hover 伪元素,我将解释如何在没有 ngClass

你可以用下面的方法做你想做的事

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

:悬停

您可以在“模板语法”的文档中看到其他绑定方法 here

使现代化

你的问题是下列问题的重复 post

下次请把你的问题说得更准确一点,祝你好运!