angular4面包屑路由在页面刷新后被清空

Question

项目头部有一栏面包屑路由，参考Demo实现了跳转功能，但是刷新页面后面包屑数据被清空

1.路由面包屑配置

export const visualizationRoutes = [
  {
    path: '',
    component: VisualizationComponent,
    children: [
      {
        path: 'dc-visual',
        loadChildren: './dc-visual/dc-visual.module#DcVisualModule',
      },
      {
        path: 'rack-monitor/:name',
        loadChildren: './rack-monitor/rack-monitor.module#RackMonitorModule',
        data: {
          breadcrumb: 'rack-monitor'
        }
      },
      {
        path: 'standard-rack-monitor/:name',
        loadChildren: './standard-rack-monitor/standard-rack-monitor.module#StandardRackMonitorModule',
        data: {
          breadcrumb: 'standard-rack-monitor'
        },
      }
    ]
  }
];

2.在VisualizationComponent中获取面包屑数据的函数(参考demo)

3.html中展示

    <ol class="breadcrumb">
      <li>
        <a routerLink="/visualization/dc-visual" class="breadcrumb">Visual Patten</a>
      </li>
      <li *ngFor="let breadcrumb of breadcrumbs">
        <a [routerLink]="[breadcrumb.url, breadcrumb.params]">{{breadcrumb.params.name}}</a>
      </li>
    </ol>

控制台打印

刷新后没有面包屑的输出

请大神赐教

Answer 1

刷新页面后数据源activatedRoute.root为空，所以面包屑数据并没有生成，在获取到面包屑数据后存到session里面

sessionStorage.setItem('breadcrumbList', JSON.stringify(this.breadcrumbs));

然后在ngAfterViewInit中获取

  ngAfterViewInit(){

   let breadcrumbList = sessionStorage.getItem('breadcrumbList');
 
    if(this.breadcrumbs.length==0){
      this.breadcrumbs = JSON.parse(breadcrumbList);
    }

    this.showActionMenu();

  }