Question

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

我可以使用以下代码路径获取网址参数：

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并不是真正的标准做法。

因为查询参数确实是某个地方的属性，如果你可以在某个地方做到这一点＆＃34;一个服务，它会更好，因为那样你就可以将这个服务注入你的组件而不是像我们现在那样进行路由。例如，页面和限制可以存在于服务上并注入控制器和组件，这将是一个更好的解决方案。

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

如何在emberjs组件中获取url params

1 个答案: