jquery - 如何使用 Angular 而不是jquery打开悬停时的下拉菜单？

Question

我想用 Angular (7.x) 替换客户端中的以下 jquery 语句:

   //dropdown on hover in jquery

if($('.navbar').width() > 1007)
  {
    $('.nav .dropdown').hover(function() {
      $(this).addClass('open');
    },
    function() {
      $(this).removeClass('open');
    });
  }

到目前为止，我暂时将 ElementRef 和 Renderer2 与相应的(鼠标...)事件监听器一起使用。我也可以将此逻辑移动到带有 HoSTListener 的指令...

   //element-wise angular code
<li #drop class="dropdown singleDro" (mouseover)="openDropDown($event)" (mouseleave)="closeDropDown($event)">
            <a href="javascript:void(0)"
               class="dropdown-toggle"
               data-toggle="dropdown"
               role="button"
               aria-haspopup="true"
               aria-expanded="false">
              <i class="fa fa-list-ul icon-dash" aria-hidden="true"></i> Listings <i class="fa fa-angle-down" aria-hidden="true"></i></a>
            <ul class="dropdown-menu">
              <li><a [routerLink]="['/dashboard/shop/add']">Add Shop</a></li>
              <li><a [routerLink]="['/dashboard/shop/view']">My Shops</a></li>
            </ul>
          </li>


//component code
  openDropDown(event: Event) {
    if (this.navbarDash.nativeElement.offsetWidth > 1007) {
      this.renderer.addClass(this.drop.nativeElement, 'open');
    }
  }
  closeDropDown(event: Event) {
    this.renderer.removeClass(this.drop.nativeElement, 'open');
  }

...但我正在寻找一个更全面的解决方案，它具有与 jquery 解决方案类似的效果。我更喜欢一些应用程序级别的解决方案，可以传播给所有 child ......

您能否告诉我哪个概念可以帮助实现所描述的目标。

谢谢

哲罗鱼

Answer 1

您可以只使用NgClass，当触发mouseover时，您可以将 bool 值设置为true。

类似这样的事情:

<li #drop 
class="dropdown singleDro" 
(mouseover)="isOpened = true" 
(mouseleave)="isOpened = false" 
ngClass="isOpened ? 'open' : ''">...dropdown-stuff..</li>