如何在角度组件中实现面包屑

时间:2017-05-07 07:13:19

标签: javascript angularjs angular-ui-router

我正在尝试使用组件在角度1.6中实现面包屑。 我有一个视图(容器组件)内有大约10个组件,它们有不同的链接,一个主要组件实际显示数据(比如一个word文档),其余都是建议文档的链接。

我的层次结构是Home>搜索> ShowAllResults>查看

我想要像Home>这样的面包屑{keywords searching}> {分类搜索}> {doc name}。

我的问题是,由于我的网站设计,我无法全局使用<bread-crumb></bread-crumb>。我必须在每个页面上调用它。 那么保留这种层次结构的最佳方法是什么,以便我得到一个整洁和漂亮的导航?

我的想法是使用localstorage作为存储介质,并在<bread-crumb></bread-crumb>中呈现数据。并使用$ destroy删除最近的url / state

这种方法的问题是$destroy将首先执行。从localstorage获取数据并修改breadcrumb,但在此之前我将在localstorage中插入。或者我是这么认为的。所以这个混乱导致面包屑打破了形成。我也不知道如何handel浏览器回来

1 个答案:

答案 0 :(得分:0)

经过一些调查研究后,我发现https://www.npmjs.com/package/angular-breadcrumbs是最佳解决方案。它已经以最好的方式实施。