在 EmberJS 中重定向

Question

我对 EmberJS 比较陌生，因此非常感谢您的帮助。我正在尝试做一些我觉得理论上应该很简单的事情——我有一个组件，在 DOM 元素之一上，我想要一个重定向到路由的点击处理程序，但我一直无法弄清楚如何做到这一点。

我有我的组件： //components/sample-card-header.js

import Component from '@ember/component';
export default Component.extend({
  actions: {
    goToSamples() {
      this.transitionTo('samples');
    }
  }
});

还有我的把手模板：

//模板/components/sample-card-header.hbs

<div class="card_header" {{action "goToSamples" bubble=false}}>Samples</div>

我知道我可以做到： <div class="card_header" onClick="window.location.href=('/samples')" > 但我想使用路由器路径。

提前致谢

Answer 1

问题是 transitionTo 在组件内部不可用。你有两个选择。您可以通过将代码修改为这样来将操作传递给您的路线。

1.) 在路由中创建一个动作来处理转换，然后将动作从组件向上传递。 Ember.

行动向上，数据向下的心态

组件

import Component from '@ember/component';
export default Component.extend({
  actions: {
    goToSamples() {
      //this passes the action to the components parent. It could be a route, other component, etc..
      this.sendAction('transition');
    }
  }
});

路线 template.hbs 与组件

{{said-component transition='action-on-route'}}

route.js

...
actions: {
  action-on-route: function(){
    this.transitionTo('samples')
  }
}

2.) 您可以将路由服务注入组件。这将使 transitionTo 通过路由服务对组件可用。我仍然会建议选项一，因为它使组件更具可扩展性。

您的新组件代码。

import Component from '@ember/component';
import { inject }from '@ember/service';
export default Component.extend({
  router: inject(),
  actions: {
    goToSamples() {
      this.get('router').transitionTo('samples');
    }
  }
});

另一种选择

我在编辑的时候突然想到了这个。如果您只需要进行转换，也可以使用 Link-to 帮助程序。 link-to 帮助器提供了更改标签名称的能力。因此，您可以使用 link-to 帮助器渲染带有点击事件的 div 来转换路由。

示例component.hbs

...
{{#link-to 'samples' class='card_header' tagName='div'}}
    Some html
{{/link-to}}