在Octane中向LinkTo添加额外操作

8tntrjer  于 2022-10-20  发布在  其他
关注(0)|答案(2)|浏览(135)

我有一个带有链接的下拉菜单,当链接被点击时,我希望菜单关闭。
类似于(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来实现这一点,但我希望找到一种更习惯的方法来解决这个问题。

csga3l58

csga3l581#

如果需要执行其他逻辑,可以在操作中实现重定向,而不是使用LinkTo助手。为此,需要将RouterService注入组件,然后调用其transitionTo方法。类似于:

export default class ExampleComponent extends Component {
  @service router;

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

请注意,Route中还有transitionTo()方法,Controller中也有transitionToRoute(),它们的行为类似于LinkTo助手。但这些方法现在已被弃用,使用RouterService是在js代码中进行转换的推荐惯用方法。

z2acfund

z2acfund2#

我已经编写了一个组件来主要处理这个问题,但我很确定LinkTo中的边缘情况比我所覆盖的要多(例如,它没有覆盖传递的模型或模型列表)。我称之为<LinkToWithAction />,它看起来像:

<a href={{this.href}} class={{if this.isActive "active"}} {{on "click" this.navigate}} >
    {{yield}}
</a>
import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

export default class LinkToWithActionComponent extends Component {
  @service router;

  get href() {
    return this.router.urlFor(this.args.route, {
      queryParams: this.queryParams,
    });
  }

  get isActive() {
    return this.router.isActive(this.args.route);
  }

  get queryParams() {
    return this.args.queryParams ?? {};
  }

  @action
  navigate(evt) {
    evt.preventDefault();
    this.args.action();
    this.router.transitionTo(this.args.route, {
      queryParams: this.queryParams,
    });
  }
}

它被称为:

<LinkToWithAction
  @route="mymaterials"
  @action={{set this.isOpen false}}
  @queryParams={{hash course=null}}
>
  {{t "general.myprofile"}}
</LinkToWithAction>

issuetransitionTo在调用时将未设置的queryParams添加到URL中,从而影响公共路由器服务,这使得这一点更加烦人。内置组件在不存在此行为的情况下使用私有内部路由器,并且可能值得使用该私有服务,但现在我们将继续传递查询参数。

相关问题