Question

我想在3个级别创建嵌套的延迟加载，但是我的方案仅适用于2个基本级别的app.module.ts和pages.module.ts 我想从pages.module.ts

为person.module.ts创建相同的场景

我的 app.module.ts 定义和路由模块，如下所示：

@NgModule({
  declarations: [AppComponent],
  imports: [
    AppRoutingModule,      
  ],
  exports: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    AppRouteGuard,
    { provide: APP_BASE_HREF, useValue: '/' },
  ],
})
export class AppModule {
}

，并在我的 app-routing.module.ts 中定义以下路线：

const routes: Routes = [
  {
    path: 'pages',
    loadChildren: () => import('./pages/pages.module').then(mod => mod.PagesModule),
    canActivate : [AppRouteGuard]
  },
  {
    path: 'login',
    component: LoginComponent,
  },
  { path: '', redirectTo: 'pages', pathMatch: 'full' },
  { path: '**', redirectTo: 'pages' },
];

const config: ExtraOptions = {
  useHash: true,
};

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

，并且在我的 pages.module.ts 中，定义了具有以下代码的pages-routing.module.ts：

const routes: Routes = [
  {
    path: '',
    component: PagesComponent,
    children: [
      {
        path: 'dashboard',
        component: ECommerceComponent,
      },
      {
        path: 'persons',
        loadChildren: () => import('./persons/persons.module').then(mod => mod.PersonsModule)
      },
      {
        path: '',
        redirectTo: 'persons',
        pathMatch: 'full',
      },
      {
        path: '**',
        component: NotFoundComponent,
      }
    ]
  }];


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

对于这些级别，一切都可以，但是当我定义 persons-routing.module.ts 时，像这样：

    const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'account-likes',
        component: LikesComponent
      },
      {
        path: '',
        redirectTo: 'account-likes',
        pathMatch: 'full'
      }
    ]
  }
    ]


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

和我的temlplate一样：

<div class="row ml-0">
  <div class="col-xs-12 col-sm-6 col-md-5 col-lg-2 p-0 person-sidebar">
    <nb-card size="small" class="mb-0">
           hello world
    </nb-card>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-7 col-lg-10 pl-0">
    <router-outlet></router-outlet>
  </div>
</div>

我的 persons.component.html 什么也不显示你能帮我吗？

Answer 1

检查此工作示例this

Answer 2

在您的示例中，问题出在PersonRoutingModule中，因为在Routes数组中未定义任何组件，因此需要更新PersonRoutingModule.ts中的组件

Angular8：嵌套延迟加载不起作用

2 个答案: