时间戳

首页 > 解决方案 > 在 Octane 中向 LinkTo 添加额外操作

ember.js - 在 Octane 中向 LinkTo 添加额外操作

问题描述

我有一个带有链接的下拉菜单，当单击链接时，我希望关闭菜单。

类似（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执行此操作，但我很想找到一种更惯用的方法来解决这个问题。

标签： ember.js

解决方案

如果你需要执行额外的逻辑，你可以在一个动作中实现重定向而不是使用LinkTo助手。为此，您需要注入RouterService组件，然后调用其transitionTo方法。就像是：

export default class ExampleComponent extends Component {
  @service router;

  @action
  navigate(route) {
    this.menuExpanded = false;
    this.router.transitionTo(route);
  }
}

请注意，还存在transitionTo()来自 Route 和transitionToRoute()来自 Controller 的方法，它们的行为类似于LinkTohelper。但是这些方法现在已被弃用，使用RouterService是在 js 代码中进行转换的推荐惯用方式。

推荐阅读