我有一个带有链接的下拉菜单,当链接被点击时,我希望菜单关闭。
类似于(a11y/i18n截断):
<ul class="menu">
<li>
<LinkTo @route="myprofile">
Profile
</LinkTo>
</li>
<li>
<LinkTo @route="logout">
Logout
</LinkTo>
</li>
</ul>
我想在链接中添加一个额外的点击处理程序,比如:
<ul class="menu">
<li>
<LinkTo @route="myprofile" {{on "click" this.closeMenu}}>
Profile
</LinkTo>
</li>
<li>
<LinkTo @route="logout" {{on "click" this.closeMenu}}>
Logout
</LinkTo>
</li>
</ul>
然而,这使得LinkTo
毫无用处,因为它重新加载页面,就像是遵循一个链接,而不是转换到一个新的路由。我们目前正在使用hember-link-action来实现这一点,但我希望找到一种更习惯的方法来解决这个问题。
2条答案
按热度按时间csga3l581#
如果需要执行其他逻辑,可以在操作中实现重定向,而不是使用
LinkTo
助手。为此,需要将RouterService
注入组件,然后调用其transitionTo
方法。类似于:请注意,Route中还有
transitionTo()
方法,Controller中也有transitionToRoute()
,它们的行为类似于LinkTo
助手。但这些方法现在已被弃用,使用RouterService
是在js代码中进行转换的推荐惯用方法。z2acfund2#
我已经编写了一个组件来主要处理这个问题,但我很确定
LinkTo
中的边缘情况比我所覆盖的要多(例如,它没有覆盖传递的模型或模型列表)。我称之为<LinkToWithAction />
,它看起来像:它被称为:
issue和
transitionTo
在调用时将未设置的queryParams添加到URL中,从而影响公共路由器服务,这使得这一点更加烦人。内置组件在不存在此行为的情况下使用私有内部路由器,并且可能值得使用该私有服务,但现在我们将继续传递查询参数。