Question

我正在使用Angular 6创建应用程序，现在我想用jquery hover（）方法添加类。我有5个链接，一切看起来都相同，但其中2个添加了* ngIf指令。它看起来像：

<li class="nav-item" *ngIf="router.url !== '/video' && router.url !== '/galeria'">
      <a class="nav-link" href="#o-nas">
         O Nas
      </a>
 </li>

当我在路线中激活了链接＆＃39;视频＆＃39;这些2个是动态删除的。

我想在悬停时添加课程，例如将font-size更改为50px并且所有链接都有效，但只有其中2个*ngIf不可用。

$(".nav-item").hover(
      function() {
        $(this).addClass("link-active");
        console.log("check");
      },
      function() {
        $(this).removeClass("link-active");
      }
    );

出了什么问题？我没有想法解决这个问题

Answer 1

使用mouseenter和mouseleave个事件。然后像[class.link-active]

一样动态使用add class

<li class="nav-item" [class.link-active]="hover" *ngIf="router.url !== '/video' && router.url !== '/galeria'"
  (mouseenter) ="hover=true "  (mouseleave) ="hover=false">
      <a class="nav-link" href="#o-nas">
         O Nas
      </a>
 </li>

Answer 2

请不要在Angular应用程序中使用JQuery。

你有很多活动要做。

<强>的onMouseOver

<li on-mouseover='active()' [class.link-active]="active" class="nav-item" *ngIf="router.url !== '/video' && router.url !== '/galeria'">
      <a class="nav-link" href="#o-nas">
         O Nas
      </a>
 </li>

mouseOver的替代

模板

<li (mouseover)='active()' [class.link-active]="hover" class="nav-item" *ngIf="router.url !== '/video' && router.url !== '/galeria'">
      <a class="nav-link" href="#o-nas">
         O Nas
      </a>
 </li>

TS

public hover:boolean = false;
public active(){
   this.hover = !this.hover;
}

Answer 3

Jquery没有看到带有* ngIf指令的项，因为在ngIf的值为true之前，ngIf中的元素不存在。如果你有一个像这样的情况你应该使用[隐藏]，这基本上是显示无或阻止但是使用jquery在角度内做这种事情不是一个好主意更好的方法将像@sachila上面描述的< / p>

Angular 6 - Jquery没有看到带有* ngIf指令的项目

3 个答案: