在Ember模板中打印出所有父级和子级路由

时间:2019-07-16 00:22:09

标签: ember.js

假设我有一条如下所示的Ember路线

myApp/RouteA/RouteB/RouteC

有没有一种方法可以获取我的路由或控制器中所有不同路由级别的名称?

原因是因为我试图编写一个动态生成面包屑的余烬组件。

这里有一个例子更具体

enter image description here

1 个答案:

答案 0 :(得分:3)

@jelhan评论了现有的一个不错的插件,但是如果需要,可以直接实现自己的插件。

Ember有一个公共router service,可用于获取有关当前路线的信息。 currentRouteName是一种适用于此的方法。想象一下路由结构:

Router.map(function() {
  this.route('about');
  this.route('blog', function () {
    this.route('post', { path: ':post_id' });
  });
});
  • currentRouteName将返回
    • index,当您访问/
    • about,当您访问/about
    • blog.index,当您访问/blog
    • blog.post,当您访问/blog/some-post-id

您可以在分隔符上进行拆分,以获取不同的路径部分来构建面包屑。在您的面包屑组件中,只需注入routerService并使用计算属性即可获取当前的面包屑(当应用程序更改路由时会更新)

import Component from '@ember/components';
import { inject } from '@ember/service';
import { computed } from '@ember/object';

export default Component.extend({
  router: inject(),
  breadcrumbs: computed('router.currentRouteName', function(){
     // build your breadcrumbs however you see fit
  })
})