angular2 利用路由制作breadcrumb面包屑

原文地址 Angular2 Breadcrumb using Router

在web领域 面包屑依旧是ui导航的必备元素之一，我们将用angular的Router来制作一个breadcrumb面包屑

Demo

Check out my demo plunker: https://plnkr.co/edit/aNEoyZ?p=preview

Router

首先 让我们快速浏览一下app.routing.module.ts，看看我们的路由配置：

import { ModuleWithProviders } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { IndexComponent } from "./index/index.component";
import { RootComponent } from "./root/root.component";
import { SigninComponent } from "./signin/signin.component";
import { SignupComponent } from "./signup/signup.component";

const routes: Routes = [
  {
    path: "",
    component: RootComponent,
    children: [
      {
        path: "signin",
        component: SigninComponent,
        data: {
          breadcrumb: "Sign In"
        }
      },
      {
        path: "signup",
        component: SignupComponent,
        data: {
          breadcrumb: "Sign Up"
        }
      },
      {
        path: "",
        component: IndexCompone