谁能告诉我路由器的流程，它如何处理延迟加载模块中的路由配置和嵌套路由？

Question

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

我的 app.routing.module 是

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 是

<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 是

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

report.module.ts 有一个共享模块，其组件<app-datacard [depart]="depart"></app-datacard> 被使用，并从父级和显示中获取数据。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 到

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

它有效，但如何？

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

如果将report.routing.module.ts的参数化路由添加到app.routing.module.ts 作为 报告模块.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>是路由器的必要规则吗？

Answer 1

您的设置适合​​路由。

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

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

所以在你的组件中注入ActivatedRoute并替换this.route。

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

至于<router-outlet></router-outlet>，你需要它在父组件中让你的孩子渲染。

但是如果你没有找到那个错误页面，那么它应该是navigate 方法问题