如何在 Ember js 中获取 currentRouteName 的动态部分

How to get dynamic part of currentRouteName in Ember js

我需要 URL 的 'model/thing/1' 段的动态部分,因为我试图从当前在嵌套路由中加载的模型访问应用程序控制器中的模型数据。有没有办法访问此 URL 的动态部分,或者是否有其他方法以某种方式访问​​此数据?

model 挂钩中的第一个参数是 params,其中包含您要查找的内容。

这在指南中有解释:https://guides.emberjs.com/v2.11.0/routing/specifying-a-routes-model/#toc_dynamic-model

示例:

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
    return this.get('store').findRecord('photo', params.photo_id);
  }
});

如果您只需要在页面的其他地方(而不是在当前模板中)显示模型数据(或任何数据),那么您可以使用 ember-elsewhere or ember-wormhole.

要访问路由参数,您可以注入私有 routing service 并使用它的 currentState.routerJsState.params 属性。 属性 包含由当前路由名称索引的每个可用路由参数,如下所示:

{
   application: {},
   test: {
      model_id: "19"
   },
   test.nested: {
      nested_id: "1"
   }
}

例如,要显示当前路由参数,我们需要遵循以下几行:

controllers/application.js(可以是组件或任何 ember 对象)

import Ember from 'ember';

export default Ember.Controller.extend({
   routing: Ember.inject.service('-routing'),

   params: Ember.computed('routing.currentState', 'routing.currentRouteName', function() {
       let allParams = this.get('routing.currentState.routerJsState.params');
       let routeName = this.get('routing.currentRouteName');
       return allParams[routeName];
   }),

   jsonParams: Ember.computed('params', function() {
       let params = this.get('params');
       return JSON.stringify(params);
   })
});

templates/application.hbs

<div>params={{jsonParams}}</div>

另一种选择是创建服务并在相关路由的 afterModel 挂钩中用所需数据填充它。

services/data-service.js:

import Ember from 'ember';

export default Ember.Service.extend({
});

嵌套路由:

routes/nested.js

import Ember from 'ember';

export default Ember.Route.extend({
   dataService: Ember.inject.service('data-service'),

   afterModel(model, transition) {
      this.get('dataService').set('model', model);
   }
});

controllers/application.js:

import Ember from 'ember';

export default Ember.Controller.extend({
   dataService: Ember.inject.service('data-service')
});

templates/application.hbs:

<div>{{dataService.model}}</div>

既然你可能不希望在所有路由中都显示这个数据,那么你可以注入路由服务并使用currentRouteName 属性来决定什么时候显示它。