Angular 多布局路由不起作用答案

【问题标题】：Angular Multiple layouts routing is not workingAngular 多布局路由不起作用
【发布时间】：2020-12-19 01:07:41
【问题描述】：

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

路由模块.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>

【问题讨论】：

我想要一个简单的多布局结构而不使用延迟加载。检查这个例子stackblitz.com/edit/angular-multi-layout-example@JasonWhite
乍一看，您的代码似乎没问题。有什么错误抛出吗？如果你可以用 stackblitz 复制你的错误，我可以看看这个。
@RameezRami 我没有收到任何错误是问题所在。我使用了您的示例并将布局路线设置为空路径，并注释了第二个布局（培训）的 redirectPath。当两个布局路径为空时，它会导航到路由列表中的第一个布局并进行渲染。如果指定了路径，我的路由器将无法读取路径。已经为此苦苦挣扎了将近 2 天。
@RameezRami 我知道了，我只需要在我的 index.html 中添加因为 app.component.ts 的活动路由未知。真的很奇怪

标签： html angular typescript routes angular-routing

【解决方案1】：

由于 app.component.ts 不是路由组件，它对活动路由一无所知。如果您想在 app.component.ts 中使用主路由器插座，则必须在 index.html 中添加 <base href="/">。

【讨论】：

【解决方案2】：

我认为您需要将主路由添加到路由数组。 { 小路： ''，组件：任何组件， }

【讨论】：

查看这个例子，我有同样的结构stackblitz.com/edit/angular-multi-layout-example