【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 ...
随机推荐
- ASP.NET Web API 框架研究 Action方法介绍
在根据请求解析出匹配的Controller类型并创建实例后,要在该Controller类型中的众多Action方法中选择与请求匹配的那一个,并执行,然后返回响应. Action方法,其元数据,主要包括 ...
- E - Tears of Drowned
Description Tia Dalma: Come. What service may I do you? You know I demand payment. Jack: I brought p ...
- Delphi中Unicode转中文
function UnicodeToChinese(inputstr: string): string; var i: Integer; index: Integer; temp, top, last ...
- 201621123018《Java程序设计》第9周学习报告
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 泛型个人认为可以理解为一种模糊的类型,在里面写入各种方法,程序员可以根据需要再创建具体类型的对象,然后调用泛型 ...
- C语言实现windows进程遍历
#include <windows.h> #include <tlhelp32.h> //进程快照函数头文件 #include <stdio.h> int main ...
- FunDA(16)- 示范:整合并行运算 - total parallelism solution
在对上两篇讨论中我们介绍了并行运算的两种体现方式:并行构建数据源及并行运算用户自定义函数.我们分别对这两部分进行了示范.本篇我准备示范把这两种情况集成一体的并行运算模式.这次介绍的数据源并行构建方式也 ...
- Weblogic 错误 <BEA-000403> <BEA-000438>解决办法
控制台提示如下错误: <Error> <Socket> <BEA-000438> <Unable to load performance pack. Us ...
- mongoose入门
概述 像Mysql和Mongodb这样的数据库,一般都是在命令行或者工具里面进行操作,如果想在node搭建的服务器上面操作,就必须要利用特殊的模块的.其中操作Mongodb数据库需要用到mongoos ...
- 【xsy2425】容器 dp
题目大意:有$n$个人,区间大小为$m$,每个人必须覆盖一段区间$[l_i,r_i]$,问你存在多少种不同的覆盖方案,使得区间上每个位置被覆盖的次数不超过$t$. 两种方案被定义为不同当且仅当存在第i ...
- 服务器返回的http状态码
状态码 响应类别 原因短语 1XX 信息性状态码(Informational) 服务器正在处理请求 2XX 成功状态码(Success) 请求已正常处理完毕 3XX 重定向状态码(Redirectio ...