- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
在我的 Angular 5 项目中,我正在尝试为我的组件创建面包屑,我遵循了本指南 https://medium.com/@bo.vandersteene/angular-5-breadcrumb-c225fd9df5cf
通过 thin breadcrum 只显示 app-component.html 文件,它不会显示在其他组件中......我希望在某些组件中有 beadcrumb。
喜欢:
export class BreadcrumbComponent implements OnInit {
breadcrumbs$;
// Build your breadcrumb starting with the root route of your current activated route
constructor(private activatedRoute: ActivatedRoute,
private router: Router) {
this.breadcrumbs$ = this.router.events
.filter(event => event instanceof NavigationEnd)
.distinctUntilChanged()
.map(event => this.buildBreadCrumb(this.activatedRoute.root));
}
ngOnInit() {
}
buildBreadCrumb(route: ActivatedRoute, url: string = '',
breadcrumbs: Array<BreadCrumb> = []): Array<BreadCrumb> {
// If no routeConfig is avalailable we are on the root path
const label = route.routeConfig ? route.routeConfig.data[ 'breadcrumb' ] : 'Home';
const path = route.routeConfig ? route.routeConfig.path : '';
// In the routeConfig the complete path is not available,
// so we rebuild it each time
const nextUrl = `${url}${path}/`;
const breadcrumb = {
label: label,
url: nextUrl
};
const newBreadcrumbs = [ ...breadcrumbs, breadcrumb ];
if (route.firstChild) {
// If we are not on our current path yet,
// there will be more children to look after, to build our breadcumb
return this.buildBreadCrumb(route.firstChild, nextUrl, newBreadcrumbs);
}
return newBreadcrumbs;
}
}
html:
<ol class="breadcrumb">
<li *ngFor="let breadcrumb of breadcrumbs$ | async"
class="breadcrumb-item">
<a [routerLink]="[breadcrumb.url, breadcrumb.params]">
{{ breadcrumb.label }}
</a>
</li>
</ol>
我将路由器事件移至构造函数以检测路由器更改,但它在其他组件中仍未显示任何内容.. 在他的代码中,如果我们转到内容组件,它也不会显示任何内容。
我该如何解决这个问题?
最佳答案
此组件只会在 app.component
中工作,因为它正在监听路由器事件。
在 app.component's
中创建的任何组件<router-outlet>
导航完成后创建。因此,没有您的子组件可以响应的导航事件。
我建议您创建 breadcrumbs$
在 app.component
中流并重构您的面包屑组件以接受 ActivatedRoute
作为@Input()
.
关于angular 5 在某些组件中有面包屑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49830151/
如何使用 Meteor 实现响应式(Reactive)面包屑和铁路由器? 现在我正在寻找由 react session 变量触发的当前路径,然后在 DOM 中添加与该路由对应的每个链接与 jQuery
我想知道grails中面包屑的用法和实现。 我有一些gsp(view)页面,主页是默认页面,我有6个类别,在那6个子页面中,我需要在我的页面中显示导航路径,例如 家庭/杂货/杂货店... 家庭/财务/
我想创建一个包含一个动态项目的面包屑导航。像这样的事情: Home > Category A > Subcategory 1 > XYZ 其中“类别 A”和“子类别 1”是静态的,“XYZ”是动态的。
我想创建一个包含一个动态项目的面包屑导航。像这样的事情: Home > Category A > Subcategory 1 > XYZ 其中“类别 A”和“子类别 1”是静态的,“XYZ”是动态的。
我正在尝试在我的 React 项目中实现面包屑布局。我没有使用 router4 来呈现 URL。此时面包屑出现的样子。 Home |Test Update |Testssss |Test11111 我
我需要将树状结构更改为一些重定向(面包屑方式)。我认为问题在于我只构建了重定向的第一部分,而没有以某种方式正确回填。我一直正确地完成重定向的第一部分,但是一旦我必须重置网址,就会失败: 不想要的结果
当您使用 ul 元素来格式化面包屑(旨在获得更好的 Google 搜索结果)时,您如何定义 RDFa 标记?我问的原因是 li 元素是彼此的 sibling ,而不是 child 。我正在做类似的事情
我从 Themeisle 买了一个支持 WooCommerce 的 WordPress 模板 Zerif Pro。模板 WooCommerce 页面不显示允许用户从一个页面导航到另一个页面的面包屑。下
我想从 magento 页面中删除面包屑,尤其是产品详细信息和产品列表页面。 这可以在不更改任何代码的情况下完成吗?仅在管理面板内? 最佳答案 最好的方法是去: 系统 --> Web --> 默认页面
目前我在 vue.js 2.0 中的 BreadCrumbs 看起来像这样: Forum
我正在尝试使用 clip-path 制作面包屑路径。 #clip span { padding: 3px 20px; background-color: #666; color: whit
由于我无法在任何地方找到合适的 RDFa 示例,我想我应该在这里问一个问题。在 Google's page有使用微数据或 RDFa 标记的面包屑示例。当您单击“示例 2”旁边的“RDFa”下的“查看标
早上好,我创建了我们网站组合的前端,我需要一点帮助(头脑不合适=)) 问题是:我需要开发带有面包屑和图像的标题 我知道图像上的父类必须有 position: relative 和 childrens
我正在使用 Spring MVC + 磁贴。 现在我想构建面包屑。所以,我正在使用这个: https://github.com/pawanspace/BreadCrumb-Spring-MVC 它运行
我坚持启动 CSS 来构建面包屑,如下图链接所示。感谢您的帮助 :) 图片- http://s1015.photobucket.com/user/dbf1655/media/bred.png.html
我正在使用 ControlsFX 的 BreadcrumbBar,效果很好。我唯一的问题是将其样式设置为如下图所示。使用风景 View 时,我看到该组件只有三个类 .bread-crumb-bar、.
我想为一个页面做一种面包屑,文件夹嵌套在它的页面上。在 Sitecore 中看起来像这样: home/ main/ sub/ Folder1/ Pag
我有一个问题。我还没有找到谷歌应该如何查看产品页面面包屑的信息。尝试了一些修复,但这些都没有正常工作。例如,如果我转到产品 www.domain.com/shoes-255并在此工具中使用它 http
在 WordPress 中,我目前使用的是 Yoast's SEO Plugin显示breadcrumbs对于我的页面和帖子,在访问特定页面时工作正常。 这是我用来在我的 WordPress 模板中显
我想在用户在 magento 前端导航我自己的模块时显示面包屑,该网站已经有适当的面包屑代码,可以按照标准 magento 面包屑在其他地方使用。 我需要在我的模块中做什么来指定当前面包屑路径? 我更
我是一名优秀的程序员,十分优秀!