Angular 8 嵌套路由使用子级和各自的路由模块最多三级不工作

Question

我有一个示例演示应用程序，其中包含三层 嵌套路由

检查 Stackblitz here

一级导航链接

-Dashboard
-My Profile
-My Attendance
-My leaves --->

        -Apply Leave
        -Check Leave Balance ----->

                          -Casual
                          -Earned
                          -Bad Link

问题：最后两个链接（休闲和获得）应该显示各自的组件但显示“pnf404leave works!”，即使不是发现它应该显示“pnf404balance works!”

有三个路由module.ts个文件

应用程序路由。module.ts

 //app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ProfileComponent } from './profile/profile.component';
import { AttendanceComponent } from './attendance/attendance.component';
import { Page404Component } from './page404/page404.component';
import { LeavesComponent } from './leaves/leaves.component';
import { BalanceModule } from './leaves/balance/balance.module';
import { LeavesModule } from './leaves/leaves.module';

const routes: Routes = [
    { path: 'dashboard', component: DashboardComponent },
    { path: 'profile', component: ProfileComponent },
    { path: 'attendance', component: AttendanceComponent },
    { path: 'leaves', component: LeavesComponent },
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: '**', component: Page404Component },
];
@NgModule({
    imports: [
        BalanceModule,
        LeavesModule,
        RouterModule.forRoot(routes,{ enableTracing: true })
    ],
    exports: [RouterModule]
})
export class AppRoutingModule { }

离开路由。module.ts

//leaves-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ApplyComponent } from './apply/apply.component';
import { BalanceComponent } from './balance/balance.component';
import { LeavesComponent } from './leaves.component';
import { PNF404leaveComponent } from './pnf404leave/pnf404leave.component';


const routes: Routes = [
  {
    path: 'leaves', component: LeavesComponent, children: [
      {
        path: 'apply', component: ApplyComponent
      },
      {
        path: 'balance', component: BalanceComponent
      },
      {
        path: '', redirectTo: 'apply', pathMatch: 'full'
      },
      { path: '**', component:  PNF404leaveComponent}
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class LeavesRoutingModule { }

平衡路由。module.ts

//balance-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BalanceComponent } from './balance.component';
import { CasualComponent } from './casual/casual.component';
import { EarnedComponent } from './earned/earned.component';
import { PNF404balanceComponent } from './pnf404balance/pnf404balance.component';


const routes: Routes = [
  {
    path: 'balance', component: BalanceComponent, children: [

      {
        path: 'casual', component: CasualComponent
      },
      {
        path: 'earned', component: EarnedComponent
      },
      {
        path: '', redirectTo: 'casual', pathMatch: 'full'
      },
      { path: '**', component:  PNF404balanceComponent}
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class BalanceRoutingModule { }

Answer 1

你所有的路线实际上都在同一层。

@NgModule({
    imports: [
        BalanceModule,
        LeavesModule,
        RouterModule.forRoot(routes,{ enableTracing: true })
    ],
    exports: [RouterModule]
})
export class AppRoutingModule { }

这里导入了你的三个路由模块，路由器从头到尾依次搜索路由。这意味着每当路由器尝试进行匹配时，它都会按以下顺序搜索路由； 1. BalanceRoutinModule 2. 离开路由模块 3.AppRoutingModule

当您输入 leaves/balance/casual 时，路由器会在 LeavesRoutingModule 中将第一部分匹配到 path: 'leaves', component: LeavesComponent 并在 LeavesRoutingModule 中再次将第二部分匹配到 path: 'balance', component: BalanceComponent 并且当它尝试时为了匹配第三部分，它无法在 LeavesRoutingModule 中进行匹配，因此它落入 path: '**', component: PNF404leaveComponent LeavesRoutingModule

因为 BalanceRouting 在顶部有 balance 路径并且 LeavesRouting 在顶部有 leaves ，路由器会尝试从路径的开头匹配它们。所以;

在 BalanceRoutingModule 中更改此行

path: 'balance', component: BalanceComponent, children: [

至此

path: 'leaves/balance', component: BalanceComponent, children: [

使 casual 和 earned 路由有效，但正如您在评论中所说，它们呈现错误 router-outlet

为了让它们在正确的插座中呈现，然后 balance 相关配置应该进入 LeavesRouting 如下；

const routes: Routes = [
  {
    path: 'leaves', component: LeavesComponent, children: [
      {
        path: 'apply', component: ApplyComponent
      },
      {
        path: 'balance', component: BalanceComponent, children: [

          {
            path: 'casual', component: CasualComponent
          },
          {
            path: 'earned', component: EarnedComponent
          },
          {
            path: '', redirectTo: 'casual', pathMatch: 'full'
          },
          { path: '**', component: PNF404balanceComponent }
        ]
      },
      {
        path: '', redirectTo: 'apply', pathMatch: 'full'
      },
      { path: '**', component: PNF404leaveComponent }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class LeavesRoutingModule { }

这是一个工作演示 https://stackblitz.com/edit/angular-nested-routing-with-modules-p96odh

这也可能看起来很复杂。由于您创建了不同的路由模块，我知道您想将路由配置委托给子模块。在这种情况下，最好的办法是使用 lazy-loading 如下；

在 AppRoutingModule

LeavesModule

{ path: 'leaves', loadChildren: () => import(`./leaves/leaves.module`).then(m => m.LeavesModule) },

在 LeavesRoutingModule

BalanceModule

{ path: 'balance', loadChildren: () => import(`./balance/balance.module`).then(m => m.BalanceModule) },

这里是实现

https://stackblitz.com/edit/angular-nested-routing-with-modules-v8q9sy

Angular 8 嵌套路由使用子级和各自的路由模块最多三级不工作

Angular 8 Nested Routing using Children and respective Route Modules upto three level not working

angular-routing

angular