可以将mouseEnter与ember-bootstrap组件一起使用吗？

Question

我目前正在一个项目中使用Ember Bootstrap，创建导航栏是我使用上下文组件的第一次真正体验。

导航栏的当前代码如下：

{{#bs-navbar type="dark" backgroundColor="primary" class="p-0" as |navbar|}}
{{navbar.toggle}}
<div class="container-fluid" style="padding-left:50px;padding-right:50px;height:50px ">
    <div class="navbar-nav mr-left">
        {{#navbar.content}}
        {{#navbar.nav as |nav|}}

        {{#nav.dropdown as |dd|}}
        {{#dd.toggle}}Dropdown 1 <span class="caret"></span>{{/dd.toggle}}
        {{#dd.menu as |ddm|}}
        {{#ddm.item}}{{#ddm.link-to "test1"}}Link 1{{/ddm.link-to}}{{/ddm.item}}
        {{#ddm.item}}{{#ddm.link-to "test2"}}Link 2{{/ddm.link-to}}{{/ddm.item}}
        {{/dd.menu}}
        {{/nav.dropdown}}

        {{#nav.item}}
        {{#nav.link-to "test"}}Current User: <b>MICKEY MOUSE</b>{{/nav.link-to}}
        {{/nav.item}}
        {{/navbar.nav}}
        {{/navbar.content}}
    </div>
</div>
{{/bs-navbar}}

这个组件的部分规范是，当用户将鼠标悬停在其中一个下拉链接上时，左侧会出现一个子菜单，而我很难弄清楚如何做到这一点。

主要的问题是我不知道如何在这样的上下文组件中利用mouseEnter事件。我通常可以在元素空间中添加一个动作，如下所示：

<h1 {{action "anAction" on="mouseEnter"}}>Text</h1>

我不能在这里这样做，因为元素空间由子组件控制。同样，如果我尝试使用像这样的闭包操作

{{ddm.link-to anAction=(action 'hostAction')}}

然后，我不确定如何在mouseEnter事件上指定操作触发，并得到“未找到操作”性质的错误-我怀疑是因为Ember Bootstrap add on没有公开供我使用的anAction操作。

任何指导都将不胜感激。

(我确实尝试为此设置了一个工作旋转，但除了显示一个没有链接的空导航栏之外，我什么也做不了！)

Answer 1

您可以使用onmouseenter在ember hbs中触发操作

<h1 onmouseenter={{action "action-name"}}>Text</h1>

在{{#ddm.link-to}}中使用mouseEnter (类似于超文本标记语言onmouseenter

{{#ddm.link-to mouseEnter=(action "action-name") "test1"}}Link 1{{/ddm.link-to}}