Реализация намерения наведения в angular 2+

Для реализации наведения в angular необходимо использовать события mouseenter и mouseleave над элементами.

Следующий пример поможет вам:

HTML

<p (mouseenter) = "onMouseEnter($event)" (mouseleave) = "onMouseLeave($event)">Some value</p>

Код

public onMouseEnter($event): void {
   //your code when the mouse cursor enters the element
}

public onMouseLeave($event): void {
   //your code when the mouse cursor leaves the element
}

Вы можете реализовать это, например, используя плагин hoverintent

Вы можете создать свою собственную директиву атрибутов angular и подключить плагин к элементу, для которого эта директива используется, внутри метода ngOnInit этой директивы, например, следующим образом:

public ngOnInit()
{
    this.HoverListener = hoverintent(this.Element.nativeElement,
        () =>
        {
            // Handler in - do any action here, like opening a menu for example
        },
        () =>
        {
            // Handler out - do any action here, like closing a menu for example
        } 
    );
}

вам нужно получить ссылку на элемент, введенную в конструктор обычным способом:

constructor(protected Element: ElementRef)
{
}

также не забудьте вызвать метод remove() в методе директивы ngOnDestroy, чтобы предотвратить любые утечки памяти:

public ngOnDestroy()
{         
    this.HoverListener.remove();     
}

В проекте, в котором я использовал этот подключаемый модуль, я решил загрузить исходный файл javascript подключаемого модуля как часть страницы и не пытался включить его в набор накопительных пакетов, который я использую для объединения скомпилированного приложения AOT.