角子级路由在懒加载模块内的问题

时间:2020-06-09 10:41:02

标签: angular-ui-router

我有角度路由器的问题。我在这里延迟加载了一个组件,它有自己的路由和子路由。我的问题在于使用路由器出口访问这些路由。

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标签内进行, 但是它将我重定向到主路由器“ /模块”中。

0 个答案:

没有答案