角度 2+ 中的悬停意图实现答案

【问题标题】：Hover intent implementation in angular 2+角度 2+ 中的悬停意图实现
【发布时间】：2018-07-10 06:48:45
【问题描述】：

我很难找到在 Angular 2 中实现悬停意图的任何东西。接受任何建议。

【问题讨论】：

标签： javascript angular typescript hoverintent

【解决方案1】：

例如，您可以使用hoverintent plugin 来实现这一点

您可以创建自己的角度属性指令并将插件挂钩到在该指令的 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)
{
}

也不要忘记在指令 ngOnDestroy 方法中调用remove() 方法以防止任何内存泄漏：

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

在我使用此插件的项目中，我选择将插件 javascript 源文件作为页面的一部分加载，并且没有尝试将其包含在用于捆绑 AOT 编译应用程序的汇总包中。

【讨论】：

【解决方案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
}

【讨论】：