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

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>

当我在路由中激活链接“视频”时，这些 2 li 将被动态删除。

我想在悬停时添加类，例如将字体大小更改为 50px，并且所有链接都有效，但只有这两个链接*ngIf无效。

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

怎么了？我没有解决这个问题的想法

标签： jqueryangularhtml

Answer 1

使用mouseenter和mouseleave事件。然后像动态地使用添加类[class.link-active]

<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>