Question

我对EmberJS比较新，所以对任何帮助表示赞赏。我正在尝试做一些我认为理论上应该简单的事情 - 我有一个组件并且在一个DOM元素上，我想要一个重定向到路由的点击处理程序，但我一直无法弄清楚如何让这种情况发生。

我有我的组件： //组件/样品卡-header.js

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

我的把手模板：

//模板/组件/样品卡-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 helper提供了更改tagName的功能。因此，您可以使用单击事件呈现div，以使用链接到帮助程序转换路径。

示例component.hbs

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

重定向到EmberJS

1 个答案: