Question

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

检查Stackblitz here

一级导航链接

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

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

                          -Casual
                          -Earned
                          -Bad Link

问题：最后两个链接（休闲和赚钱）应显示各自的组成部分，但应显示“ pnf404leave有用！”，即使未找到也应显示“ pnf404balance有效！“

具有三个路由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 { }

leaves-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；

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

这似乎也很复杂。并且由于您创建了不同的路由模块，因此我了解您希望将路由配置委派给子模块。在这种情况下，最好的做法是使用如下所示的延迟加载；

LeavesModule中的延迟加载AppRoutingModule

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

BalanceModule中的延迟加载LeavesRoutingModule

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

这是实现

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

使用子级和相应的路由模块的Angular 8嵌套路由，直到三个级别均无法正常工作

1 个答案: