面包屑路由困难

问题描述 投票:0回答:1

这里是路由模块结构的示例。

  const routes: Routes = [
{
  path: '',
  data: {
    title: 'Buildings'
  },
  children: [
    {
      path: 'buildings',
      component: BuildingsComponent,
      data: {
        title: 'Buildings'
      }
    },
    {
      path: 'buildings/building-detail',
      component: BuildingDetailComponent,
      data: {
        title: 'Building Detail'
      }
    },
    {
      path: 'buildings/building-detail/:id',
      component: BuildingDetailComponent,
      data: {
        title: 'Building Deatil'
      }
    }        
  ]
}

];

所以我正在使用Angular并创建了一个具有以下结构的面包屑...

主页->建筑物->建筑物详细信息

一切都非常接近工作。我唯一不能做的就是在建筑物细部中返回建筑物。我绝对尝试了一切,并想知道是否有人可以看到跳出来的内容。

这是我用来从建筑物单击进入建筑物详细信息的按钮。

      <button type="button" [routerLink]="['../buildings/building-detail/']" class="button button- 
      primary"><span>Add</span></button> 

因此,当我单击建筑物详细信息中的建筑物元素时,将转到主页。我认为我应该在顶层路径中放置redirectTo:'buildings'。一旦我这样做,我从上面的添加按钮单击的操作就会失败。

这很复杂,我求助于反复试验,但我会绕圈转。我正在使用Bootstrap做面包屑。

谢谢您的建议。

其他信息enter image description here

现在只需忽略“房间”部分。所以我有一个设施路由可以做到这一点...

       import { NgModule } from '@angular/core';
       import { Routes, RouterModule } from '@angular/router';
       import { BuildingsComponent } from './building/buildings/buildings.component';
       import { RoomsComponent } from './room/rooms/rooms.component'

    const routes: Routes = [
      {
path: '',
children: [
    {path: '', redirectTo: '/facility/buildings', pathMatch: 'full'},
  {
    data: {
      title: 'Buildings'
    },
    path:'buildings',
    component: BuildingsComponent,
    loadChildren: () => import('./building/building.module').then(m => m.BuildingModule)
  },
  {
    data: {
      title: 'Room'
    },
    path:'rooms',
    component: RoomsComponent,
    loadChildren: () => import('./room/room.module').then(m => m.RoomModule)
  },    
       ]
     }
   ];

    @NgModule({
     imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
   })
    export class FacilityRoutingModule {}

上面的Pathmatch完整部分很好,但是因为Rooms位于设施内,因此Room-Detail重定向到Buildings。所以那只是暂时存在。

因此,我有了一个Building模块,该模块具有以下路由。

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
   import { BuildingsComponent } from './buildings/buildings.component';
   import { BuildingDetailComponent } from './building-detail/building- 
   detail.component';

    const routes: Routes = [
     {
      path: '',
      data: {
        title: 'Buildings'
       },
       children: [
    {
      path: 'buildings',
      component: BuildingsComponent,
      data: {
        title: 'Buildings'
      }
    },
    {
      path: 'buildings/building-detail',
      component: BuildingDetailComponent,
      data: {
        title: 'Building Detail'
      }
    },
    {
      path: 'buildings/building-detail/:id',
      component: BuildingDetailComponent,
      data: {
        title: 'Building Detail'
      }
    }        
  ]
}
     ];

   @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
    })
    export class BuildingRoutingModule {}

enter image description here

因此,当我单击说添加按钮时,将显示以下页面。

enter image description here

因此,当我在面包屑中单击“建筑物”时,它只会返回到幻像#facility页面,而不是“建筑物”网格页面。因此,我理想情况下希望避免添加facility.component.ts,因为我认为我不需要它。我刚好可以在建筑物路由器区域中应用路由。

angular web bootstrap-4
1个回答
0
投票

添加一个组件以导航到您的空路径中,并完全匹配pathMatch,如下所示:

const routes: Routes = [
{
  path: '',
  component: HomeBuildingComponent,
  pathMatch:'full',
  data: {
    title: 'Buildings'
  },
  children: [
    {
      path: 'buildings',
      component: BuildingsComponent,
      data: {
        title: 'Buildings'
      }
    },
    {
      path: 'buildings/building-detail',
      component: BuildingDetailComponent,
      data: {
        title: 'Building Detail'
      }
    },
    {
      path: 'buildings/building-detail/:id',
      component: BuildingDetailComponent,
      data: {
        title: 'Building Deatil'
      }
    }        
  ]
}
];

此外,我认为您正在尝试将所有子组件加载到同一路由器出口。我建议您使用多个路由器插座,并像这样构造它们:

const routes: Routes = [
{
  path: '',
  component: HomeBuildingComponent,
  pathMatch:'full',
  data: {
    title: 'Buildings'
  },
  children: [
    {
      path: 'buildings',
      component: BuildingsComponent,
      data: {
        title: 'Buildings'
      },
      children:[
          { path: 'building-detail', component: BuildingDetailComponent,data: { title: 'Building Detail'}},
          { path: 'building-detail/:id', component: BuildingDetailComponent,data: { title: 'Building Detail'}},
      ]
    }       
  ]
}
];

我希望这可以解决问题。

© www.soinside.com 2019 - 2024. All rights reserved.