Angular面包屑组件

选中文字可对指定文章内容进行评论啦,绿色背景文字可以点击查看评论额。

结合路由的data,自动生成路由的面包屑

breadcrumb.component.ts

import { Component } from '@angular/core';
import { Observable } from 'rxjs';

import { Breadcrumb } from './breadcrumb.model';
import { BreadcrumbService } from './breadcrumb.service';

@Component({
  selector: 'breadcrumb',
  templateUrl: './breadcrumb.component.html',
  styleUrls: ['./breadcrumb.component.scss']
})
export class BreadcrumbComponent {

  breadcrumbs$: Observable<Breadcrumb[]>;

  constructor(private readonly breadcrumbService: BreadcrumbService) {
    this.breadcrumbs$ = breadcrumbService.breadcrumbs$;
  }

}

breadcrumb.component.html

<ul>
    <li *ngFor="let breadcrumb of (breadcrumbs$ | async)">
      <a [routerLink]="breadcrumb.url">{{ breadcrumb.label }}</a>
    </li>
  </ul>

breadcrumb.component.scss

ul {
    & {
      list-style: none;
      margin: 0;
      margin-bottom: 1.2em;
      padding: 0;
    }
  
    li {
      & {
        display: inline;
      }
  
      &:before {
        content: ">";
        margin: 0 6px;
      }
  
      &:first-child:before {
        content: "";
        margin: 0;
      }

      a {
          color: currentColor;
      }
    }
  }

breadcrumb.service.ts

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Data, NavigationEnd, Router } from '@angular/router';
import { BehaviorSubject } from 'rxjs';
import { filter } from 'rxjs/operators';

import { Breadcrumb } from './breadcrumb.model';

@Injectable({
  providedIn: 'root'
})
export class BreadcrumbService {

  // Subject emitting the breadcrumb hierarchy
  private readonly _breadcrumbs$ = new BehaviorSubject<Breadcrumb[]>([]);

  // Observable exposing the breadcrumb hierarchy
  readonly breadcrumbs$ = this._breadcrumbs$.asObservable();

  constructor(private router: Router) {
    this.router.events.pipe(
      // Filter the NavigationEnd events as the breadcrumb is updated only when the route reaches its end
      filter((event) => event instanceof NavigationEnd)
    ).subscribe(event => {
      // Construct the breadcrumb hierarchy
      const root = this.router.routerState.snapshot.root;
      const breadcrumbs: Breadcrumb[] = [];
      this.addBreadcrumb(root, [], breadcrumbs);

      // Emit the new hierarchy
      this._breadcrumbs$.next(breadcrumbs);
    });
  }

  private addBreadcrumb(route: ActivatedRouteSnapshot, parentUrl: string[], breadcrumbs: Breadcrumb[]) {
    if (route) {
      // Construct the route URL
      const routeUrl = parentUrl.concat(route.url.map(url => url.path));

      // Add an element for the current route part
      if (route.data.breadcrumb && !route.data.breadcrumb.skip) {
        const breadcrumb = {
          label: this.getLabel(route.data),
          url: '/' + routeUrl.join('/')
        };
        breadcrumbs.push(breadcrumb);
      }

      // Add another element for the next route part
      this.addBreadcrumb(route.firstChild, routeUrl, breadcrumbs);
    }
  }

  private getLabel(data: Data) {
    // The breadcrumb can be defined as a static string or as a function to construct the breadcrumb element out of the route data
    return typeof data.breadcrumb === 'function' ? data.breadcrumb(data) : data.breadcrumb;
  }

}

breadcrumb.model.ts

export interface Breadcrumb {
    label: string;
    url: string;
  }

版权声明:著作权归作者所有。

相关推荐

Angular 4选择组件模板DOM元素(DOM操作)的方式

Angular提供了多种方式让我们获取页面的元素。主要分为两种:基于Decorator:@ViewChild,@ViewChildren,@ContentChild,@ContentChildren使用ElementRef以及querySelectorDecorator:@ViewChild,@ViewChildren,@ContentChild,@ContentChildren@ViewChil

Angular入口组件(entry component)和声明式组件的区别

Angular的声明式组件和入口组件的区别体现在两者的加载方式不同。声明式组件是通过组件声明的selector加载入口组件(entry component)是通过组件的类型动态加载声明式组件声明式组件会在模板里通过组件声明的selector加载组件。示例@Component({   selector: 'a-cmp',   templat

Angular 5交换(重排)动态组件的位置

如果忽略了angular的组件是由数据控制的特性,很容易陷入使用dom操作控制组件。最简单的方式是使用数组存放数据,通过重排数组中的元素的位置,从而达到重排组件的效果。示例:app.tsimport {Component, NgModule, VERSION} from '@angular/core'import {BrowserModule} from '@angular/platform-br

Linux排除特定文件打包压缩文件夹

Linux打包可以使用tar命令。如果要排除目录里的特定文件或文件夹,可以使用--exclude选项。$ tar --exclude='./folder' -zcvf /backup/filename.tgz .--exclude选项需要放在源文件和目的压缩包文件之前。排除多个文件/文件夹$ tar --exclude='./folder' --exclude='./upload/folder2'

Angular 5滚动页面到顶部(scroll top)

例如在文章页面组件PostComponent,对于的路由为/posts/:id。export class PostComponent implements OnInit { post$: Observable<Post>; private selectedId: number; constructor( private service: PostService, pr

Angular Component组件的生命周期-ngOnChanges,ngOnInit

Angular Component组件的生命周期按时间次序可以分为以下阶段:组件的生命周期是从Angular 实例化组件开始接着渲染组件的视图以及子组件视图完成组件视图渲染后,Angular仍然会检测组件的变化,主要包括检测绑定属性的变化(change detect)根据检测到的变化,如果有必要,则更新组件和它的子组件Component组件生命周期结束最终是销毁组件,以及从DOM中移除组件的模板有

Angular Component组件的生命周期-ngDoCheck

在Angular Component组件的生命周期(一)知道,ngOnChanges只能用于检测Component组件绑定的@Input属性的赋值和重置,并不能检测组件发生的任何变化。其中一个例子是:let user:User = new User("张三"); user.name = “李四”;当父组件向子组件的@Input属性传递的是一个User对象,但父组件是通过user.name来修改对象