如何在emberjs组件中获取url params

Question

我是emberjs的初学者,我想在组件中访问url params 但不知道它是如何在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')
})

这是一个实现这一点的旋转.

答案越长:

你正在使用私有的注入路由,并使用routerJsState.fullQueryParams这样的不是真正的标准做法.

因为查询参数确实是某个地方的属性,如果你可以把它"放在某个地方"服务,那就更好了,因为那时你可以将这个服务注入你的组件而不是像我们现在那样进行路由.例如,页面和限制可以存在于服务上并注入控制器和组件,并且是一个更好的解决方案.

这是一个旋转的解决方案.

相关代码:

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