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插件没有公开anAction我可以使用的动作。

任何指导将不胜感激。

（我确实为此尝试设置了一个可操作的旋转按钮，但是除了显示没有链接的空导航栏外，无能为力！）

Answer 1

您可以使用onmouseenter

在余烬中触发动作

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

在mouseEnter中使用onmouseenter（类似于HTML {{#ddm.link-to}}）

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

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

1 个答案: