我有角度路由器的问题。我在这里延迟加载了一个组件,它有自己的路由和子路由。我的问题在于使用路由器出口访问这些路由。
app-routing.module.ts
{
path: 'sign-in',
component: SignInComponent
},
{
path: 'module',
component: MainPageComponent,
canActivate: [AuthGuard],
children: [
{
path: 'students-badges',
canLoad: [LoadBadgeGuard],
loadChildren: './views/badge/badge.module#BadgeModule'
},
{
path: 'attendance',
component: ProfessorNLecturesComponent,
children: [
{
path: ':tGroupId',
component: PresentListComponent
}
]
},
{
path: 'didactic-agenda',
component: DidacticCourseComponent,
children: [
{
path: ':didacticCourseId',
component: DidacticCourseDetailsComponent
}
]
},
{
path: 'admission-backOffice',
loadChildren: './views/admission/admission.module#AdmissionModule',
},
{
path: 'online-exam',
loadChildren: './views/online-exam/online-exam.module#OnlineExamModule'
},
{
path: 'questionnaire',
component: LandingViewComponent
}
]
},
{
path: '',
redirectTo: '/module',
pathMatch: 'full'
},
{
path: '**',
redirectTo: '/module',
pathMatch: 'full'
}
];
@NgModule({
imports: [
RouterModule.forRoot(SATS, {enableTracing: true})
],
exports: [RouterModule]
})
export class AppRoutingModule {}
在线考试路由.modul.ts
{
path: '',
component: ExamsComponent,
children: [
{
path: ':examId/:configId',
component: ExamComponent
}
]
}
];
@NgModule({
imports: [
RouterModule.forChild(ONLINE_EXAM_ROUTES)
],
exports: [
RouterModule
]
})
export class OnlineExamRoutingModule {}
exams.component.html
<mat-sidenav-content>
<div class="fluid-container panel-header" *ngIf="!loading">
<div class="row">
<div class="col panel-title">{{label}}</div>
<div class="col"></div>
</div>
</div>
<div class="fluid-container panel-container" *ngIf="!loading">
<div class="row">
<app-accordion-view class="col"
[fieldMap]="filters"
[orderMap]="filtersConfig"
[fieldDataPool]="filterDataPool"
[lang]="lang"
(filterValue)="filter($event)"></app-accordion-view>
</div>
<div class="row label-row">
<div class="col">{{labels?.name?.fieldLabel}}</div>
<div class="col">{{labels?.examDate?.fieldLabel}}</div>
<div class="col">{{labels?.registrationStart?.fieldLabel}}</div>
<div class="col">{{labels?.totalRegisteredStudents?.fieldLabel}}</div>
<div class="col">{{labels?.status?.fieldLabel}}</div>
<div class="col"></div>
</div>
<div class="row data-row" *ngFor="let data of dataList?.list">
<div class="col row-view">
<mat-icon>assignment</mat-icon>
<span style="margin-left: 15px">{{data?.name}}</span>
</div>
<div class="col row-view">{{data?.examDate | date: 'MMM dd yyyy, HH:mm a'}}</div>
<div class="col row-view">
{{data?.registrationStart | date: 'MMM dd yyyy'}} - {{data?.registrationEnd | date: 'MMM dd yyyy'}}
</div>
<div class="col row-view">{{data?.totalRegisteredStudents}}</div>
<div class="col row-view">{{data?.status}}</div>
<div class="col align-right">
<button mat-icon-button
(click)="openConfig(data)"
[disabled]="!examButtons.canGet()">
<mat-icon>settings</mat-icon>
</button>
</div>
</div>
<div class="footer-row">
<mat-paginator [showFirstLastButtons]="true"
[length]="listMetadata.totalRecords"
[pageSize]="listMetadata.pageSize"
[pageSizeOptions]="[5, 15, 45]"
(page)="paginator($event)"></mat-paginator>
</div>
</div>
</mat-sidenav-content>
<mat-drawer style="width: 100%"
#studentExamConfig
position="end"
mode="over">
<div class="fluid-container panel-header">
<div class="row">
<div class="col panel-title">{{label}}</div>
<div class="col"></div>
</div>
</div>
<router-outlet></router-outlet>
</mat-drawer>
</mat-sidenav-container>
我希望子路由的渲染会在router-outlet标签内进行, 但是它将我重定向到主路由器“ /模块”中。