TransitionToRoute ('route') Из внутреннего компонента

Как я могу перейти на маршрут прагматически изнутри действия компонента?

Я пытался использовать @get('controller').transitionToRoute('images'), но контроллер ссылается на сам компонент. Я понимаю, что компоненты должны быть автономными, поэтому следует ли использовать представление вместо того, чтобы лучше взаимодействовать с контроллерами/маршрутами?

Пример

App.ImageEditorComponent = Ember.Component.extend
  ...
  actions:
    delete: ->
      App.Files.removeObject(object)
      @transitionToRoute('images') # This throws an exception
  ...

Ответ 1

Ember.component.sendAction

Создайте действие для родительского контроллера.

export default Ember.Controller.extend({
  actions: {
    transInController() {
       this.transitionToRoute('home')
    }
  }
});

Задайте это действие при вызове компонента.

{{some-component transInComponent=(action "transInController")}}

"Отправить действие" от компонента до контроллера

export default Ember.Component.extend({
  actions: {
      componentAction1() {
          this.sendAction('transInComponent');
      }
  }
});

Ответ 2

Вы можете передать контроллер через связывание, а затем получить доступ к нему внутри вашего компонента, например:

{{image-editor currentControllerBinding="controller"}}

App.ImageEditorComponent = Ember.Component.extend
  ...
  actions:
    delete: ->
      App.Files.removeObject(object)
      @get('currentController').transitionToRoute('images')
  ...

Ответ 3

Компонент должен быть изолирован от своего контекста, поэтому, хотя вы можете передать ссылку на контроллер, который, вероятно, выходит за рамки того, для чего предназначен компонент. Возможно, вам захочется просто использовать представление с собственным контроллером. Посмотрите Представления по компонентам - История репликации Ember.

Из Ember.js, Отправка действий от компонентов к вашему приложению, обсуждается передача действий от компонента по иерархии маршрутов.

Ответ 4

В Ember многое изменилось с момента публикации. Так что, возможно, сегодня лучшим вариантом будет переход к компоненту действия маршрута, который заботится о переходе (возможно, используя причудливый аддон ember-cli-route -действие.

В противном случае вы можете создать инициализатор с ember g initializer router и внутри поставить там код вроде этого

export function initialize (application) {
   application.inject('route', 'router', 'router:main')
   application.inject('component', 'router', 'router:main') 
}

export default {
  name: 'router',
  initialize
}

Таким образом вы можете получить доступ к маршрутизатору в своем компоненте с помощью this.get('router') и, например, выполнить переход

 this.get('router').transitionTo('images')

Ответ 5

В компоненте компонента компонент .HBS {{#link-to "routeDestinationYouWant" }}

Пример:

<section class="component">
{{#link-to "menu.shops.category.content" "param"}}
        <figure id="{{Id}}" class="list-block yellow-bg text-center" {{action "showList" "parameter"}}>
            <section class="list-block-icon white-text my-icons {{WebFont}}"></section>
            <figcaption class="list-block-title black-text">{{{Title}}}</figcaption>
        </figure>
          {{/link-to}}
</section>

Ответ 6

Я написал этот ответ для другого аналогичного вопроса.

Если вы хотите использовать маршрутизатор только в специальном компоненте или службе или контроллере, вы можете попробовать следующее:

Инициализировать атрибут с помощью приватного сервиса -routing. The - потому что это еще не открытый API.

router: service('-routing'),

И затем внутри любого метода действия или другой функции внутри службы или компонента:

this.get('router').transitionTo(routeName, optionalParams);

Примечание: в контроллере будет transitionToRoute.

Ссылка на вопрос: Ember transitionToRoute чисто в компоненте без sendAction

Ссылка на ответ: fooobar.com/info/219993/...