javascript - Angular 2+ 中的悬停意图实现

Question

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

Answer 1

您可以使用 hoverintent plugin 来实现此目的例如

您可以创建自己的 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
        } 
    );
}

您需要以通常的方式在构造函数中注入(inject)元素引用:

constructor(protected Element: ElementRef)
{
}

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

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

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