【angular5项目积累总结】breadcrumb面包屑组件
view
code
<div class="fxs-breadcrumb-wrapper" aria-label="Navigation history">
<div class="fxs-breadcrumb-dropmenu">
<div class="fxs-dropmenu" role="presentation"> <div class="fxs-dropmenu-content fxs-text-link fxs-popup fxs-portal-bg-txt-br fxs-dropmenu-defaultWidth fxs-dropmenu-right fxs-dropmenu-invisible">
<ul class="fxs-breadcrumb-overflow">
</ul>
</div>
</div>
</div>
<ng-container *ngFor="let breadcrumb of breadcrumbs; index as i">
<div class="fxs-breadcrumb-divider fxs-trim-svg-secondary">
<svg height="100%" width="100%" aria-hidden="true" role="presentation" focusable="false">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#FxSymbol0-011"></use>
</svg>
</div>
<a [routerLink]="[breadcrumb.url, breadcrumb.params]" class="fxs-breadcrumb-crumb fxs-trim-text fxs-trim-hover">{{ breadcrumb.label }}</a>
</ng-container>
</div>
import { Component, OnInit } from "@angular/core";
import { Router, ActivatedRoute, NavigationEnd, Params, PRIMARY_OUTLET } from "@angular/router";
import "rxjs/add/operator/filter";
interface IBreadcrumb {
label: string;
params: Params;
url: string;
} @Component({
selector: 'breadcrumb',
templateUrl: './breadcrumb.component.html',
host: {
'class': 'fxs-breadcrumb'
}
}) export class BreadcrumbComponent implements OnInit { public breadcrumbs: IBreadcrumb[]; constructor(
private activatedRoute: ActivatedRoute,
private router: Router
) {
this.breadcrumbs = [];
} ngOnInit() { this.router.events.filter(event => event instanceof NavigationEnd).subscribe(event => { let root: ActivatedRoute = this.activatedRoute.root;
this.breadcrumbs = this.getBreadcrumbs(root);
});
} private getBreadcrumbs(route: ActivatedRoute, url: string = "", breadcrumbs: IBreadcrumb[] = []): any {
const ROUTE_DATA_BREADCRUMB: string = "breadcrumb"; let children: ActivatedRoute[] = route.children; if (children.length === 0) {
return breadcrumbs;
} for (let child of children) { if (child.outlet !== PRIMARY_OUTLET) {
continue;
} if (!child.snapshot.data.hasOwnProperty(ROUTE_DATA_BREADCRUMB)) {
return this.getBreadcrumbs(child, url, breadcrumbs);
} let routeURL: string = child.snapshot.url.map(segment => segment.path).join("/"); if (routeURL == "") {
return this.getBreadcrumbs(child, url, breadcrumbs);
} url += `/${routeURL}`; let breadcrumb: IBreadcrumb = {
label: child.snapshot.data[ROUTE_DATA_BREADCRUMB],
params: child.snapshot.params,
url: url
};
breadcrumbs.push(breadcrumb); return this.getBreadcrumbs(child, url, breadcrumbs);
}
} }
【angular5项目积累总结】breadcrumb面包屑组件的更多相关文章
- react+ant design Breadcrumb面包屑组件
import React from 'react'; import { Link }from 'react-router-dom'; import { Breadcrumb } from 'antd' ...
- woocommerce隐藏breadcrumb面包屑导航
woocommerce已经集成比较完善的组件,当然也包含breadcrumb面包屑导航,但是我们如果调整一下breadcrumb的位置要如何操作呢?首先要先把woocommerce隐藏breadcru ...
- Vue折腾记 - (2)写一个不大靠谱的面包屑组件
先看效果图 我把页面标题和面包屑封装到一起..就不用涉及到组件的通讯了,不然又要去监听路由或者依赖状态去获取 这里写图片描述 疑惑解答: 点击父(也就是折叠菜单)为什么会跑到子菜单第一个 因为我第一个 ...
- yoast breadcrumb面包屑导航修改去掉product
前面我们创建了wordpress添加post_type自定义文章类型和调用自定义post_type文章,现在yoast 面包屑导航出现home >product >分类1,想要把produ ...
- 【angular5项目积累总结】优秀组件以及应用实例
1.手机端 图片预览组件 组件:sideshow 效果图:(预览图全屏 且可以左右移动) code: <div class="row ui-app-s ...
- 【angular5项目积累总结】avatar组件
View Code import { Component, HostListener, ElementRef } from '@angular/core'; import { Adal4Service ...
- 【angular5项目积累总结】panel组件
view code panel.component.css :host { display:flex; min-width:300px } panel.component.html <heade ...
- 【angular5项目积累总结】遇到的一些问题以及解决办法
1.项目中字符串特别是\r\n,替换成br之后,在页面换行无法生效? 答:绑定元素 innerHTML. <div class="panel-body" [innerHTML ...
- 【angular5项目积累总结】消息订阅服务
code import { Injectable } from '@angular/core'; import { Subject } from 'rxjs/Subject'; @Injectable ...
随机推荐
- 多条件情况查询,sql select case when when else
多条件情况查询 SELECT Title, 'Price Range' = CASE WHEN price IS NULL THEN 'Unpriced' ...
- gcc 6.0编译opencv出错
在编译opencv3.2时候,出现下面错误: cmake -DCMAKE_BUILD_TYPE=RELEASE -DCMAKE_INSTALL_PREFIX=/usr/local -DBUILD_NE ...
- Azure DevOps Server:Git权限设置
Azure DevOps Server 权限概述 在Azure DevOps Server (之前名称为TFS)中,权限是一个比较复杂的概念.从权限层级上来说,包括服务器级别.团队项目集合级别.团队项 ...
- dialog里屏蔽ESC和回车
重载PreTranslateMessage,在return之前加一句判断,只要是按下ESC和回车的消息,就直接置之不理即可,代码如下: if( pMsg->message == WM_KEYDO ...
- 【转】C# 之泛型详解
原文地址:https://www.cnblogs.com/yueyue184/p/5032156.html 什么是泛型 我们在编写程序时,经常遇到两个模块的功能非常相似,只是一个是处理int数据,另一 ...
- 关于QT和SQLite以及XML
就关于qt连接使用sqlite折腾了一晚上.倒也不全是因为数据库连接的问题, 主要还是数据格式各自出问题. 原来的数据库是access, 为了导入linux下的sqlite, 我把其输出格式改成了xm ...
- css绘制特殊图形,meida查询,display inline-box间隙问题以及calc()函数
本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录 ...
- Linux删除目录下的文件的10种方法
看到了一遍文章,便突发奇想的想起Linux中删除目录下的所有文件的方法:整理了几个,如有不足,还望读者不吝赐教! 删除当前目录下的文件 1.rm -f * #最经典的方法,删除当前目录下的所有类型的文 ...
- Nginx 负载均衡和反向代理实践
nginx 以哪个配置文件启动 Nginx 负载均衡和反向代理实践 环境介绍 192.168.1.50 在这台主机上配置Nginx 的反向代理,负载均衡,和web1,web1使用的81号端口 1 ...
- html-文件上传设置accept类型延时问题
今天在做文件上传时,采用了jQuery的upload插件,使用过程中发现了一个很有意思也很头疼的问题. 上传按钮,第一次点击时瞬间就可以打开文件选择框,之后再点击则需要等待恐怖的8s以上. 百度 ...