我們可以從ember js中的組件路由嗎？

Question

我有一個組件，其中有一個按鈕，其動作類似{{ action'create '}}，並且在動作中創建我寫的像this.transitionTo（'page.new'）; 但我得到一個例外，如無法讀取未定義的屬性'enter'可以有人回答嗎？只是想知道是否有可能從組件路由？

Answer 1

這樣做的方法是使用組件中的this.sendAction()並將其冒泡到路由器。 然后路由器可以調用this.transitionTo() 。

link-to的方式是通過注入路由_routing: inject.service('-routing'),

https://github.com/emberjs/ember.js/blob/v2.1.0/packages/ember-routing-views/lib/components/link-to.js#L530

Answer 2

Ember.Component是從Ember.View擴展而你無法在視圖中使用this.transitionTo 。 它只能通過控制器/路由器完成。

如果您希望在單擊時在組件內部進行轉換，則可以使用link-to幫助程序，但如果您仍希望能夠處理該操作，請閱讀： http ： //emberjs.com/guides/components/handling-user -interaction-with-actions /以及之后的指南。

Answer 3

我發現答案是可能的。我們可以使用我們的組件操作中的以下代碼

App.Router.router.transitionTo('new route');

我們將收到一個回調，我們可以在其中設置新路由的模型。使用以下代碼。

App.Router.router.transitionTo('your route here').then(function(newRoute){

    newRoute.currentModel.set('property','value');

});

Answer 4

注射是你想做的最后一件事。 在路由和組件之間傳遞操作的方式是使用sendAction方法發送操作

template.hbs

{{your-component  action="nameOfYourRouteAction" }}

route.js

export default Ember.Route.extend({


ratesService: Ember.inject.service(),
  model() {
    //return yourdata
  },


  actions: {
    nameOfYourRouteAction(...args){
        this.transitionTo(...args);
    }
  }
});

在你的component.js中

import Ember from 'ember';

export default Ember.Component.extend({

    actions: {
        toggleTransition: function(...args) {
            this.sendAction('action', ...args);
        }
    }
});

component.hbs

<button {{action "toggleTransition" 'your route'}}>Change Route</button>