如何在emberjs组件中获取url参数

Question

我是emberjs的初学者，我想访问组件中的url params，但不知道如何在ember js中完成。

我可以在路由中获得url参数，代码如下：

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