Refresh / Reload ember route from a component

Question

I have a component, that's actually a modal dialog. When I am done with that dialog and press the "Ok" button, I want to stay on the stay page from where I opened that dialog. Which isn't difficult.

But the problem is that the dialog changes the data (I am getting data through a REST call) so I need to refresh the route that I already am on to reflect the data changes.

Since, I am calling it from a component, I don't have Route so can't call route.refresh().

I tried to get the router:

this.set('router', Ember.getOwner(this).lookup('router:main'));

and did transition to the same page:

_this.get('router').transitionTo('my-route')

But since the route hasn't changed (I only opened a dialog), transitionTo doesn't get triggered!

Is there a way I can force trigger transitionTo or refresh the page that I am on?

Thank you!

Answer 1

First, you can easily get the current route name by injecting the routing service to the component.
Then, you can get the current route instance and apply its refresh method:

// app/components/a-component.js

import Component from "ember-component";
import service from "ember-service/inject";
import getOwner from "ember-owner/get";

export default Component.extend({
  routing: service("-routing"),
  actions: {
    refresh() {
      const currentRouteName = this.get("routing.currentRouteName");
      const currentRouteInstance = getOwner(this).lookup(`route:${currentRouteName}`);
      currentRouteInstance.refresh();
    }
  }
});

Answer 2

For this, define refreshCurrentRoute method in nearest route or in application route file.

actions:{
 refreshCurrentRoute(){
  this.refresh();
 }
}

From your component, you need to call refreshCurrentRoute action. either you can use ember-route-action-helper or by passing the closure action.