Вложенная маршрутизация Angular 8 с использованием дочерних и соответствующих модулей маршрутов до трех уровней не работает - PullRequest
Новая
       20

Вложенная маршрутизация Angular 8 с использованием дочерних и соответствующих модулей маршрутов до трех уровней не работает

2 голосов
/ 05 июля 2019

У меня есть пример демонстрационного приложения с тремя уровнями вложенной маршрутизации

Проверьте Stackblitz здесь

уровень одиннавигационные ссылки 

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

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

                          -Casual
                          -Earned
                          -Bad Link

Проблема : на последних двух ссылках (Случайные и Заработанные) должны отображаться соответствующие компоненты, но отображается « pnf404leave works! » и даже если он не найдендолжно отобразиться " pnf404balance works! "

Три файла маршрутизации 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 { }

1 Ответ

1 голос
/ 05 июля 2019

все ваши маршруты на самом деле находятся на одном уровне.

@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

, и это может показаться сложным.и так как вы создали разные модули маршрутизации, я понимаю, что вы хотите делегировать конфигурацию маршрутизации дочерним модулям.в этом случае лучше всего использовать ленивую загрузку следующим образом:

  1. ленивая загрузка LeavesModule in 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

...