Как открыть раскрывающийся список при наведении курсора вместо jquery?

Question

Я хотел бы заменить следующий оператор jquery на стороне клиента на angular (7.x):

   //dropdown on hover in jquery

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

К настоящему времени я временно использовал ElementRef и Renderer2 вместе с соответствующими (мышью ...) - Eventlisteners. Я мог бы перенести эту логику также в директиву с 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. Я бы предпочел какое-то решение на уровне приложения, которое можно распространить на всех детей ...

Не могли бы вы дать мне подсказку, какая концепция может помочь в достижении описанного.

Спасибо

Таймень

Answer 1

Вы можете просто использовать NgClass, когда срабатывает mouseover, вы можете просто установить логическое значение true.

Примерно так:

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

Answer 2

Наконец это сработало:

import {Directive, HostListener, ElementRef, Renderer2} from '@angular/core';

@Directive({
  selector: '[appDropOpen]'
})
export class DropOpenDirective {

  constructor(private el: ElementRef, private renderer: Renderer2) { }

  @HostListener('mouseover') onMouseOver() {
      const elementCollection = document.getElementsByClassName('navbar');
    if (elementCollection[0].clientWidth > 1007) {
    this.renderer.addClass(this.el.nativeElement, 'open');
    }
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.renderer.removeClass(this.el.nativeElement, 'open');
  }
}

Answer 3

Вы можете использовать ngClass или class.open следующим образом

<li #drop class="dropdown singleDro" 
[class.open]="isDropdownOpen"
(mouseover)="openDropDown($event)" 
(mouseleave)="closeDropDown($event)">...dropdown-stuff..</li>

или

<li #drop class="dropdown singleDro" 
[ngClass]="{ 'open': isDropdownOpen}"
(mouseover)="openDropDown($event)" 
(mouseleave)="closeDropDown($event)">...dropdown-stuff..</li>

В своем компоненте определите член класса с именем isDropdownOpen и просто переключитезначение этого при наведении

  isDropdownOpen = false;

  ...

  openDropDown(event: Event) {
    if (this.navbarDash.nativeElement.offsetWidth > 1007) {
      this.isDropdownOpen = true;
    }
  }
  closeDropDown(event: Event) {
    this.isDropdownOpen = false;
  }