如何在Octane中为LinkTo添加额外点击动作且不破坏路由跳转功能

Ember Octane下给LinkTo添加点击回调的正确方案 #

原有直接在LinkTo上使用{{on "click"}}修饰符的写法会失效，是因为该修饰符直接绑定原生DOM事件，执行顺序在LinkTo组件内置的路由跳转逻辑之前，若处理逻辑存在隐式阻止默认行为的操作，就会导致内部路由跳转失效，触发整页刷新。

方案1：使用LinkTo内置的@onClick参数（最推荐） #

Ember原生LinkTo组件对外暴露了@onClick参数，专门用来注入额外的点击处理逻辑，不会干扰组件本身的路由跳转行为，完全符合Octane的参数传递规范：

<ul class="menu">
    <li>
        <LinkTo @route="myprofile" @onClick={{this.closeMenu}}>
            Profile
        </LinkTo>
    </li>
    <li>
        <LinkTo @route="logout" @onClick={{this.closeMenu}}>
            Logout
        </LinkTo>
    </li>
</ul>

方案2：父元素绑定点击事件 #

如果需要搭配{{on}}修饰符的特殊配置（如once、passive等事件修饰符），可以将点击事件绑定到LinkTo的父级元素上，利用事件冒泡触发关闭逻辑，完全不会影响LinkTo的原生行为：

<ul class="menu">
    <li {{on "click" this.closeMenu}}>
        <LinkTo @route="myprofile">
            Profile
        </LinkTo>
    </li>
    <li {{on "click" this.closeMenu}}>
        <LinkTo @route="logout">
            Logout
        </LinkTo>
    </li>
</ul>

两种方案都无需依赖第三方插件，符合Ember Octane的原生开发规范，性能和可维护性都优于引入ember-link-action插件的实现。

内容的提问来源于stack exchange，提问作者jrjohnson