How to pass value from Router to some service?

1

I need to access the value of currentUrl in one of my service. For that we have following code:

const Router = Ember.Router.extend({
  location: config.locationType,
  rootURL: config.rootURL,

  didTransition: function() {
    this._super(...arguments);

    Ember.run.once(this, function() {
      console.log(`GIVES NAME OF CURRENT ROUTE: ${this.currentRouteName}`);  // Gives just routes
      console.log(`GIVES CURRENT URL WITHOUT HOST: ${this.get('url')}`); // Gives current URL
      console.log(`GIVES FULL URL: ${window.location.href}`);
    });
  }


});

I need to get the value of that fullUrl in one of my services. How can I do this ?

Also, is there any other better way for getting the correct value of currentURL in services/controller?

2

I think you need to return the data via the model:

Its can be pretty simple though, example: router/index.js

import Ember from 'ember';
import RSVP from 'rsvp';

    export default Ember.Route.extend({
        model() {
            var slides = [
                {
                title: 'Precision engineered',
                content: '<h2>building systems with the least amount of waste in mind.</h2>',
                image: '/img/slides/slide1.jpg'
            },
            {
                title: 'Slide Two Title',
                content: '<h2>Slide Two Content</h2>',
                image: '/img/slides/slide2.jpg'
            },
            {
                title: 'Slide Three Title',
                content: '<h2>Slide Three Content</h2>',
                image: '/img/slides/slide3.jpg'
            },
        ];
        return RSVP.hash({
            mySlides: slides
        });
    }
});

The RSVP is only there because I usually return more than one model, in this example its not necessary.

From the index.hbs, the data could be accessed via model.slides. So I pass this data to my slide show component: {{slideshow slides=mySlides}}

A more basic example would be returning just one model:

import Ember from 'ember';

export default Ember.Route.extend({
	model() {
		return ['Scientist 1', 'Scientist 2', 'Scientist 3'];
	}
});

The data could then be accessed from the template.hbs like

{{#each model as |scientists|}}
{{scientist}}
{{/each}}

this would print out Scientist 1 Scientist 2 Scientist 3

Hope that helps.

3

Maybe I misunderstood your question. You need to get the current url or route name in a page template. I’ve done this before with my 404 page. I like to display the actually url they tried to access. You can do this via an initiliazer:

ember g initializer router

inside initializers/router.js

export function initialize(application) {
    application.inject('route', 'router', 'router:main'); // inject router into all routers
    application.inject('component', 'router', 'router:main'); // inject router into all components
    application.inject('controller', 'router', 'router:main'); // inject router into all controllers
}

export default {
  name: 'router',
  initialize
};

Then from any template you can grab info from the current route, like so:

<h2 style="margin-top: 0;">
  {{router.currentRouteName}} <!-- because of router being injected via initializer, we can grab the routers name here, doesnt work if not injected to controller -->
</h2>
<h3>
    URL '{{router.url}}' was not found on this site. <!-- and grab the actual url we are at here -->
</h3>

{{router.currentRouteName}} outputs the routes name, in my case its 404. {{router.url}} outputs the actually url trying to be accessed, such as /aboutasdgaslkdgjhsgad

I found that answer on stack overflow: ember.js - Get current route name in Ember - Stack Overflow

But I added injecting it into controller as well, as I was having trouble getting it to work.

1 Like