Angular Multiple layouts 路由不起作用 [英] Angular Multiple layouts routing is not working

问题描述

我有以下没有延迟加载的多布局结构.当导航到https://localhost:44327/admin 或/student 它不显示任何内容.如果我使用空路径而不是 admin 和 student 然后导航到它的子 (/manageConcern) 路由，它会加载路由中指定的第一个 (AdminLayoutComponent) 布局.第二个 LayoutCompnent (/trainings) 不会加载.看起来 app.component 中的路由器插座无法读取路径.知道我在这里缺少什么吗?这就是我想要实现的 https://stackblitz.com/edit/angular-multi-布局示例

路由模块.ts

RouterModule.forRoot([{路径:'管理员'，组件:AdminLayoutComponent，孩子们: [{path: '', redirectTo: 'manageConcern', pathMatch: 'full'},{path: 'manageConcern', 组件: MasterConcernComponent},{path: 'createTraining', 组件: AdminComponent},]},{路径:'学生'，组件:StudentLayoutComponent，孩子们: [{path: '', redirectTo: 'trainings', pathMatch: 'full'},{path: 'trainings', 组件: TrainingsComponent},]}]),

AdminLayoutComponent.html

<app-menu [menuItems]="menuItems"></app-menu><div class="app-body-content m-5 p-4"><路由器插座></路由器插座>

StudentLayoutComponent.html

 <div class="app-body-content m-5 p-4"><路由器插座></路由器插座>

app.component.html

解决方案

由于 app.component.ts 不是路由组件，它对活动路由一无所知.如果你想在 app.component.ts 中使用你的主路由器出口，那么你必须在你的 index.html 中添加 .

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>

解决方案

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.

这篇关于Angular Multiple layouts 路由不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！