Как я могу получить параметры url в компоненте emberjs

Question

Я начинаю на emberjs, я хочу получить доступ к параметрам url в компоненту, но не знаю, как это делается в ember js.

я мог получить URL-адрес Params в маршрут с кодом ниже:

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

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

Answer 1

Быстрый ответ:

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

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') 
}) 

Вот twiddle с этим реализовано.

Чем дольше ответ:

Вы используете инъекционную маршрутизацию, которая является частным, и используя routerJsState.fullQueryParams как это на самом деле не стандартная практика.

Поскольку параметр запроса действительно является свойством где-то, если вы можете сделать эту «где-то» службу, было бы лучше, потому что тогда вы можете внедрить эту услугу в свой компонент, а не маршрутизацию, как сейчас. Например, страница и лимит могут жить на службе и быть введены в контроллер и компонент, и это будет более приятное решение.

Адрес that solution in a 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}}