Question

我正在开发一个培训应用，其中有一个可以延迟加载的CourseModule。

// from app.module.ts
const routes: Routes = [
{
  path: 'curso',
  canActivate: [ AuthGuard ],
  data: { preload: true },
  loadChildren: './course/course.module#CourseModule'
}, ...

@NgModule({
  imports: [
    ...
    RouterModule.forRoot(routes)

然后在CourseModule中，一些路由指向组件，而其他路径则指向按需加载模块。

// from CourseModule
const routes: Routes = [
  {
    path: ':stateID/:modID',
    component: CourseComponent,
    children: [
      {
        path: 'video/:id',
        component: VideoPlayerShellComponent,
        data: { domain: videoDomain, animation: 'video' },
        resolve: { urlData: UrlIdResolver }
      },
      { path: 'ig/:id',
        component: InfoGadgetShellComponent,
        data: { domain: videoDomain, animation: 'ig' },
        resolve: { urlData: UrlIdResolver }
      },
      {
        path: 'checar-la-id',
        data: { preload: false, animation: 'id-check' },
        resolve: { urlData: UrlIdResolver },
        loadChildren: './activity-modules/id-check/id-check.module#IdCheckModule'
      },
      {
        path: 'concurso-para-genios',
        data: { preload: false, animation: 'whiz-quiz' },
        resolve: { urlData: UrlIdResolver },
        loadChildren: './activity-modules/whiz-quiz/whiz-quiz.module#WhizQuizModule'
      }
    ]
  }
];

@NgModule({
  imports: [
    ...
    RouterModule.forChild(routes)

按需模块路由如此简单...

// from WhizQuizModule
const routes: Routes = [
  { path: '', component: WhizQuizComponent, data: { title: 'Concurso para Genios' } }
];

@NgModule({
  imports: [
    ...
    RouterModule.forChild(routes)

问题是当我从一个模块导航到一个模块（即：“ checar-la-id”到“ concurso-para-genios”）时，我要离开的模块中的组件停留在屏幕上，而我导航到的模块永远不会加载。我可以轻松地在CourseModule的一部分组件与按需加载的模块之一（即“ video /：id”到“ checar-la-id”）之间导航。一切似乎都很好。

我在定义路线时是否缺少某些东西？

路由器出口HTML：

// from app.component
<div class="content-wrap">
  <router-outlet></router-outlet>
</div>

// from course.component (same result when fadeAnimation is disabled)
<div #lesson class="lesson" [@fadeAnimation]="getRouteAnimation(route)">
  <router-outlet #route="outlet"></router-outlet>
  <wts-loading-anim></wts-loading-anim>
</div>

// WhizQuizModule & IdCheckModule do not have router outlets

Angular 6：在模块之间导航不起作用

0 个答案: