Angular 6/7/8 嵌套 Child 路由使用 'loadChildren()'，不显示

Question

我正在学习 angular 并且已经开始我关于路由的章节，我希望我正在学习的项目有单独的模块和处理它们的路由。

下面是我处理路由的代码。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {PatientsDataComponent} from './main-page/main/patients/patients-data/patients-data.component';
import {RightPanelComponent} from './main-page/main/patients/right-panel/right-panel.component';


const routes: Routes = [{
  path: 'patients',
  component: PatientsDataComponent,
  children: [{
    path: '',
    component: RightPanelComponent,
    loadChildren: () => import('./main-page/main/patients/right-panel/right-panel.module').then(m => m.RightPanelModule),
    data: { preload: true }
  }]
  }];

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

我的另一个路由模块是这样的

right-panel-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {EditDetailsComponent} from './edit-details/edit-details.component';
import {AppGuard} from '../../../../app.guard';
import {RightPanelComponent} from './right-panel.component';

const routes: Routes = [{
  path: '',
  component: RightPanelComponent,
  children: [{
    path: 'editDetails/:id',
    component: EditDetailsComponent,
    pathMatch: 'full'
  }]
}];


@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class RightPanelRoutingModule {

}

我想做的是在单击动态列表项时显示 edit-details.component有一个路由器 link，同时不让其他视图消失。但我所看到的是 right-panel.component 加载而不是 edit-details.component 也就是它的child。我在 right-panel html 页面中有 <router-outlet> 标签。

PS: 我已经将模块在各自的模块中添加到导入数组中。让我知道我是否应该提供更多详细信息或页面来帮助解决这个问题。

文件夹结构见下文link。

这也是我的 right-module.ts 的样子

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {EditDetailsComponent} from './edit-details/edit-details.component';
import {RightPanelRoutingModule} from './right-panel-routing.module';


@NgModule({
  imports: [
    CommonModule,
    RightPanelRoutingModule,
  ],
  declarations: [
    EditDetailsComponent
  ]
})
export class RightPanelModule { }

有路由的HTML页面Link

  <div class="pat-list">
    <mat-selection-list [multiple]="false">
      <mat-list-option *ngFor="let pat of patients" [value]="pat.patient_id" [routerLink]="['editDetails', pat.patient_id]" (click)="details(pat)">
        <mat-icon mat-list-icon><img src="{{ pat.photo ? pat.photo : pat.gender == 'male' ? 'assets/images/personIcon.png' : 'assets/images/personIcon.png'}}" style="font-size: 20px;width: 50px; height: 50px;" /></mat-icon>
        <div class="pat-text">
          <div mat-line class="pat-name">{{pat.name}}</div>
          <mat-icon matSuffix>keyboard_arrow_right</mat-icon>
        </div>
        <mat-divider></mat-divider>
      </mat-list-option>
    </mat-selection-list>
  </div>

将示例添加到 public git 集线器存储库。 https://github.com/JudahIrani/test

Answer 1

在 angular 中有许多方法可以定义子例程，但对于解决方案，您可以这样使用： app-routing.module.ts

const routes: Routes = [
  {
  path: 'patients',
  loadChildren: './main-page/main/patients/right-panel/right-panel.module#RightPanelModule'
  }
];
// if you need "Data" property you can use

右面板-routing.module.ts

const routes: Routes = [
  {
  path: 'editDetails/:id',
  component: EditDetailsComponent,
  pathMatch: 'full'
  }
];

这适合你。

Answer 2

我得到了修复，原来中间面板缺少 <router-outlet> 指令，最终会显示正确的面板。抱歉，伙计们，告诉过你我是新来的！一个最简单的错误让我浪费了2天的时间思考

Angular 6/7/8 嵌套 Child 路由使用 'loadChildren()'，不显示

Angular 6/7/8 Nested Child Routes using 'loadChildren()', not displaying

angular

typescript

angular-routing

angular-router

angular-module