谁能告诉我路由器的流程，它如何处理延迟加载模块中的路由配置和嵌套路由? [英] Can anyone tell me the flow of router that how it treats the route configuration and nested routes in lazy-loaded modules?

问题描述

我希望将其子组件中的延迟加载模块参数化地加载到一个<router-outlet></router-outlet>中.

I want my lazy-loaded module in their children components to be parameterizly loaded in one <router-outlet></router-outlet> .

我的app.routing.module是

My app.routing.module is

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent },
  { path: 'reports', loadChildren: () => import('./reports/reports.module').then(m => m.ReportsModule) }
  { path: 'patients', loadChildren: () => import('./patients/patients.module').then(m => m.PatientsModule) },
  { path: 'consultant', loadChildren: () => import('./consultant/consultant.module').then(m => m.ConsultantModule) },
  { path: 'store', loadChildren: () => import('./store/store.module').then(m => m.StoreModule) },
  { path: 'attendence', loadChildren: () => import('./attendence/attendence.module').then(m => m.AttendenceModule) },
  { path: '' , redirectTo : 'dashboard', pathMatch: "full"},  
  { path: '**' ,component: PagenotfoundComponent }
];

app.component.html是

app.component.html is

<div id="app">
    <div>
        <div id="sidenav">
            <div id="logo"></div>
            <div routerLink="/dashboard" class="button" routerLinkActive="active">Dashboard</div>
            <div routerLink="/reports" class="button" routerLinkActive="active" >Reports</div>
            <div routerLink="/attendence" class="button"routerLinkActive="active">Attendence</div>
            <div routerLink="/patients" class="button"routerLinkActive="active">Patients</div>
            <div routerLink="/consultant" class="button"routerLinkActive="active" >Consultant</div>
            <div routerLink="/store" class="button"routerLinkActive="active">Store</div>
        </div>
    </div>
    <div id="main">
        <router-outlet></router-outlet>
    </div>
</div>

和report.routing.module.ts是

and report.routing.module.ts is

const routes: Routes = [
{ 
  path: '', component: ReportsComponent,
  children: [{ path : ':d_name' ,component: ReportdetailComponent }]
}];

report.module.ts有一个共享模块，使用了组件<app-datacard [depart]="depart"></app-datacard> 并从父级那里获取数据并显示.

report.module.ts has one shared module whose component <app-datacard [depart]="depart"></app-datacard> is used and takes data where from parent and displays.As

<p>reports works!</p>
<app-datacard [depart]="depart"></app-datacard>
<router-outlet></router-outlet>

<div class="card">
    <div  #card (click)="navigate(head.d_name)" class="card_child" *ngFor="let head of depart ;index as i">
      <div  *ngFor="let data of head | keyvalue : returnZero">
          <div *ngIf="data.key == 'd_name' ; then thenB; else elseB"></div>
          <ng-template #thenB>
            <h2>{{data.value}}</h2>
          </ng-template>
          <ng-template #elseB>
            <div class="data_detail">
              <div >{{data.key}}</div>
              <div>{{ data.value}}</div>
            </div>
          </ng-template>
      </div>
    </div>
  </div>

data-card.component.ts具有路由器方法

navigate(card){
   this.router.navigate([card], {relativeTo: this.route})
}

可以导航，但是当我导航到其子页面pagenotfound时会显示. 和 当我更改配置顺序 report.routing.module.ts 至

which navigates, but when i navigate to their children pagenotfound get displays. AND when I change the configuration order of report.routing.module.ts to

const routes: Routes = [
{ path: '', component: ReportsComponent},
{ path : ':d_name' ,component: ReportdetailComponent }
];

它有效，但是如何?

2 再次 当我在app.routing.module.ts中添加参数化路由时 和

2 AGAIN When I add parameterized route in the app.routing.module.ts and

如果将report.routing.module.ts的参数化路由添加到app.routing.module.ts 作为 report.module.ts

if add the parameterized route of report.routing.module.ts to app.routing.module.ts as report.module.ts

const routes : Route = [{ path: '', component: ReportsComponent}];

到

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent },
  { path: 'reports', loadChildren: () => import('./reports/reports.module').then(m => m.ReportsModule) },
  { path : 'reports/:d_name' ,component : ReportdetailComponent },

  { path: 'patients', loadChildren: () => import('./patients/patients.module').then(m => m.PatientsModule) },

再次

可以正常工作，但我没有获得获得路由配置的流路由器. 3 路由器是否有必要为延迟加载的嵌套路由添加<router-outlet></router-outlet>?

again works fine I'm not getting the flow router that gets the route configuration. 3 Is it necessary rule for router that to add <router-outlet></router-outlet> for the lazy-loaded's nested routes?

推荐答案

您的设置非常适合进行路由.

Your setup is good for the routing.

只需将this.route.navigate([card], {relativeTo: this.route})替换为

this.route.navigate([card], {relativeTo: this.activatedRoute})

因此在组件中注入ActivatedRoute并替换this.route.

So inject ActivatedRoute in your component and replace this.route.

关于游览问题为什么起作用，这是因为您的this.router指向基本路线，并且当您使用不带子项的设置使用参数导航到该路线时，实际上是指向正确的路线.

For tour question why does it work, its because your this.router points to base route, and when you navigate to that with param with setup that does not have children, you actually point to correct routing.

对于<router-outlet></router-outlet>，您需要在父组件中使用它来呈现孩子.

As for the <router-outlet></router-outlet>, you need it in parent component to have your children render.

但是，如果未找到该错误页面，则应该是navigate方法问题

But if your have that error page not found than it should be navigate method problem

这篇关于谁能告诉我路由器的流程，它如何处理延迟加载模块中的路由配置和嵌套路由?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！