Question

我很难找到任何在角度2中实现悬停意图的东西。打开任何建议。

Answer 1

对于以角度进行悬停实现，需要在元素上使用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
}

Answer 2

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

您可以创建自己的angular属性指令，并将插件挂接到该指令的ngOnInit方法内部的使用该指令的元素，例如：

exports.LoveNotification = functions.database.ref("/Member/{pushId}").onWrite((change, context) => {

 if (change.before.exists()) {
    return;
 } else {
    var eventLove = change.after.data.val();
    var author =eventLove.fullname;
    var title = eventLove.course;
    var key = eventLove.key;

    const payload = {
        "data": {
                    "post_id": key
                  },
        notification: {
            title: author +'Joined the app',
            body: `Course `+title,
            sound: "default",
            icon: "ic_launcher",

        }
    };

    const options = {
        priority: "high",
        timeToLive: 60 * 60 * 24 //24 hours
    };
    console.log('Sending notifications');
    return admin.messaging().sendToTopic("Member", payload, options);

    }
});

您需要以通常的方式在构造函数中注入Element引用：

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
        } 
    );
}

也不要忘记在指令ngOnDestroy方法中调用constructor(protected Element: ElementRef) { }方法以防止任何内存泄漏：

remove()

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

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

2 个答案: