鍍金池/ 問答/HTML5  Linux  網(wǎng)絡(luò)安全/ angular4面包屑路由在頁面刷新后被清空

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

項目頭部有一欄面包屑路由，參考Demo實現(xiàn)了跳轉(zhuǎn)功能，但是刷新頁面后面包屑數(shù)據(jù)被清空

clipboard.png

clipboard.png

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中獲取面包屑數(shù)據(jù)的函數(shù)(參考demo)

clipboard.png

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>

控制臺打印
clipboard.png

刷新后沒有面包屑的輸出

clipboard.png

請大神賜教

回答
編輯回答
詆毀你

刷新頁面后數(shù)據(jù)源activatedRoute.root為空，所以面包屑數(shù)據(jù)并沒有生成，在獲取到面包屑數(shù)據(jù)后存到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();

  }
2017年3月24日 18:49