Angular 8 嵌套路由使用子级和相应的路由模块最多三个级别不起作用

Question

我有一个具有三级嵌套路由的示例演示应用程序

在此处检查 Stackblitz

一级导航链接

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

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

                          -Casual
                          -Earned
                          -Bad Link

问题：最后两个链接（Casual 和 Earned）应该显示各自的组件，但显示“ pnf404leave 有效！ ”，即使没有找到它也应该显示“ pnf404balance 有效！ ”

有3个路由module.ts文件

app-routing.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 { } 

叶子-routing.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 { }

balance-routing.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. LeavesRoutingModule 3. AppRoutingModule

当您输入leaves/balance/casual路由器将第一部分匹配到path: 'leaves', component: LeavesComponent输入LeavesRoutingModule并将第二部分path: 'balance', component: BalanceComponent再次匹配到输入时LeavesRoutingModule，当它尝试匹配第三部分时，它无法进行匹配，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如下；

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

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

这也可能看起来很复杂。并且由于您创建了不同的路由模块，我知道您希望将路由配置委托给子模块。在这种情况下，最好的做法是使用延迟加载，如下所示；

1. 延迟加载LeavesModule在AppRoutingModule

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

2. 延迟加载BalanceModule在LeavesRoutingModule

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

这是实现

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