角多个布局路由不起作用 [英] Angular Multiple layouts routing is not working
问题描述
我具有下面的多层布局结构,没有延迟加载.导航到https://localhost:44327/admin或/student,它不显示任何内容.如果我使用空路径而不是admin和student,然后导航到其子级(/manageConcern)路由,则它将加载路由中指定的第一个(AdminLayoutComponent)布局.第二个LayoutCompnent(/trainings)不加载.看起来app.component中的router-outlet无法读取路径.知道我在这里缺少什么吗?这就是我想要实现的目标 https://stackblitz.com/edit/angular-multi-layout-example
I have the follwing multi-layout structure without lazy loading. When navigating to https://localhost:44327/admin or /student it doesn't show anything. 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. The second LayoutCompnent (/trainings) doesn't load. looks like the router-outlet in app.component can't read the paths. Any idea what I am missing here? This is what I want to achieve https://stackblitz.com/edit/angular-multi-layout-example
Routing-module.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
<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
<app-menu [menuItems]="menuItems"></app-menu>
<div class="app-body-content m-5 p-4">
<router-outlet></router-outlet>
</div>
app.component.html
<router-outlet></router-outlet>
推荐答案
由于app.component.ts不是路由组件,因此它对活动路由一无所知.如果要在app.component.ts中使用主路由器出口,则必须在index.html中添加< base href ="//">
.
As app.component.ts is not a routed component it doesn't know anything about the active route. If you want to use your main router-outlet in app.component.ts then you have to add <base href="/">
in your index.html.
这篇关于角多个布局路由不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!