[英]Angular Multiple layouts routing is not working
I have the follwing multi-layout structure without lazy loading.我有以下多布局结构,没有延迟加载。 When navigating to https://localhost:44327/admin or /student it doesn't show anything.
导航到 https://localhost:44327/admin 或 /student 时,它不显示任何内容。 If I use an empty path instead of admin and student then navigate to it's child (/manageConcern) route it loads the first (AdminLayoutComponent) Layout specified in routing.
如果我使用空路径而不是 admin 和 student 然后导航到它的子 (/manageConcern) 路由,它会加载路由中指定的第一个 (AdminLayoutComponent) 布局。 The second LayoutCompnent (/trainings) doesn't load.
第二个 LayoutCompnent (/trainings) 未加载。 looks like the router-outlet in app.component can't read the paths.
看起来 app.component 中的路由器插座无法读取路径。 Any idea what I am missing here?
知道我在这里缺少什么吗? This is what I want to achieve https://stackblitz.com/edit/angular-multi-layout-example
这就是我想要实现的 https://stackblitz.com/edit/angular-multi-layout-example
Routing-module.ts路由模块.ts
RouterModule.forRoot([
{
path: 'admin',
component: AdminLayoutComponent,
children: [
{path: '', redirectTo: 'manageConcern', pathMatch: 'full'},
{path: 'manageConcern', component: MasterConcernComponent},
{path: 'createTraining', component: AdminComponent},
]
},
{
path: 'student',
component: StudentLayoutComponent,
children: [
{path: '', redirectTo: 'trainings', pathMatch: 'full'},
{path: 'trainings', component: TrainingsComponent},
]
}
]),
AdminLayoutComponent.html AdminLayoutComponent.html
<app-header></app-header>
<app-menu [menuItems]="menuItems"></app-menu>
<div class="app-body-content m-5 p-4">
<router-outlet></router-outlet>
</div>
StudentLayoutComponent.html StudentLayoutComponent.html
<app-menu [menuItems]="menuItems"></app-menu>
<div class="app-body-content m-5 p-4">
<router-outlet></router-outlet>
</div>
app.component.html app.component.html
<router-outlet></router-outlet>
As app.component.ts is not a routed component it doesn't know anything about the active route.由于 app.component.ts 不是路由组件,它对活动路由一无所知。 If you want to use your main router-outlet in app.component.ts then you have to add
<base href="/">
in your index.html.如果您想在 app.component.ts 中使用主路由器插座,则必须在 index.html 中添加
<base href="/">
。
I think you need to add main route to routes array.我认为您需要将主路由添加到路由数组。 { path: '', component: AnyComponent, }
{ 路径:'',组件:AnyComponent,}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.