这里是路由模块结构的示例。
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做面包屑。
谢谢您的建议。
现在只需忽略“房间”部分。所以我有一个设施路由可以做到这一点...
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 {}
因此,当我单击说添加按钮时,将显示以下页面。
因此,当我在面包屑中单击“建筑物”时,它只会返回到幻像#facility页面,而不是“建筑物”网格页面。因此,我理想情况下希望避免添加facility.component.ts,因为我认为我不需要它。我刚好可以在建筑物路由器区域中应用路由。
添加一个组件以导航到您的空路径中,并完全匹配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'}},
]
}
]
}
];
我希望这可以解决问题。