How to pass dynamic segment to ember component

Question

How do I pass a dynamic segment in my url to a component? I can get the parameters in my model but i have no idea, how to pass that on to the component. What I do right now is:

export default Ember.Route.extend({
    sectionId: 0,

    model(params) {
        this.set('sectionId', params.section_id);
        return this.store.findAll('content');
    }
});

And in the Template:

{{#component id=sectionId}}{{/component}}

But when I log the id in my component, it says undefined.

Answer 1

You can set controller properties in setupController hook.

export default Ember.Route.extend({
    sectionId: 0,

    model(params) {
        this.set('sectionId', params.section_id);
        return this.store.findAll('content');
    },

     setupController(controller, model) {
       controller.set('sectionId', this.get('sectionId'));
     }
});

Answer 2

Your controller can have access to the params , so make sure you declare that in your controller.

For example, for your controller:

export default Ember.Controller.extend({
  queryParams: ['section'],
  section: null
});

And in your template:

{{#component id=section}}{{/component}}

Note that this is assuming your url looks something like http://example.com/posts/1?section=3