是否可以将 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 事件。我通常可以在元素 space 中添加一个动作，例如：

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

我在这里无法这样做，因为元素 space 是由子组件控制的。同样，如果我尝试使用像

这样的关闭操作

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

然后我不确定如何在 mouseEnter 事件上指定动作触发并得到 'action not found' 性质的错误 - 我怀疑是因为 Ember Bootstrap 添加on 不会公开 anAction 操作供我使用。

任何指导将不胜感激。

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

Answer 1

您可以使用 onmouseenter

在 ember hbs 中触发一个动作

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

在 {{#ddm.link-to}}

中使用 mouseEnter（类似于 HTML onmouseenter）

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

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

Is it possible to use mouseEnter with ember-bootstrap components?

ember.js