How can I get url parameters in emberjs component

Question

I start on emberjs, I want to get url parameters in the component , but I don’t know how it is done in ember js.

I could get url parameters in the route with the code below:

model(params) {
    this.store.query('ticket', {
        page: {
            number: params.page,
            size: params.size
        }
    });
},

queryParams: {
    page: {
        refreshModel: true
    },
    size: {
        refreshModel: true
    }
}

Answer 1

Quick response:

You can enter the router into the component where you need it:

import Ember from 'ember';

const { computed: { alias }, observer } = Ember

export default Ember.Component.extend({
  routing: Ember.inject.service('-routing'),
  params: alias('routing.router.currentState.routerJsState.fullQueryParams')
})

Here is a twiddle with this implemented.

Longer answer:

You are using injection routing, which is private, and using routerJsState.fullQueryParams seems like this is not standard practice.

-, "-" , , , , . , .

twiddle.

:

services/task-pager.js
import Ember from 'ember';

export default Ember.Service.extend({
 page: 0,
 limit: 3,
 nextPage: function() {
    this.set('page',this.get('page') + 1)
    console.log(this.get('page'))
  },
  previousPage: function() {
    this.set('page',this.get('page') - 1)
  }
})

// controllers/tasks.js
export default Ember.Controller.extend({

 taskPager: Ember.inject.service(),

 queryParams:['page', 'limit'],

 page: Ember.computed.alias('taskPager.page'),

 limit: Ember.computed.alias('taskPager.limit'),

 actions: {
   nextPage: function() {
     this.get('taskPager').nextPage()
   },
   previousPage: function() {
     this.get('taskPager').previousPage()
   }
 }
})

//components/display-qp.js
export default Ember.Component.extend({
  params: Ember.inject.service('task-pager')
})

//templates/components/display-qp.hbs
COMPONENT PARAMS PAGE:{{params.page}}