Question

我正在尝试通过延迟加载来设置Angular（8），但是我只是想不出如何使其工作。

我有3个模块，每个模块都有不同的子路径：

module1（在我的应用程序内部）
- / home
- / home / path1
- / home / path2
module2（应用程序的演示，公开）
- 索引
- 演示文稿
- 功能...
module3（与访问相关的所有内容）
- 登录
- 注册

任何人都会有一个有效的示例，说明如何正确实现此功能？

谢谢

编辑=这是我的主模块的路由代码：

{路径：“ home”，组件：HomeComponent，canActivate： [AuthGuardService]，孩子： [ {path：”，component：DashboardComponent，canActivate：[AuthGuardService]}， {路径：“升级”，组件：StripeFormComponent，canActivate：[AuthGuardService]} ]}，];

我试图在app-routing.module.ts中添加延迟加载。我重新加载了我的应用程序，看起来好像少了一些代码，并且我的模块看起来像是延迟加载了，但是当我尝试访问该页面时，我得到了一个空白页面，没有任何解释。所以我迷路了。

Answer 1

要在Angular 8中的延迟加载中设置路由，必须为要使用的组件定义一个模块，在其中必须定义routing.module：

 @NgModule({
      declarations: [
        DetailComponent,
      ],
      imports: [
        DetailRoutingModule,
        ChartsModule,
        CommonModule
      ]
    })

export class DetailModule { }

YorComponentDetailRoutingModule为

const routes: Routes = [{
  path: '',
  component: DetailComponent,

}];

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


export class DetailRoutingModule { }

In app.routing module you can write:

const routes: Routes = [{
  path: '',
  component: PagesComponent,
  children: [
    {
      path: 'home',
      component: HomeComponent
    },{
      path: 'home/detail',
      loadChildren: () => import('./detail/detail.module')
      .then(m => m.DetailModule),
    } ...

Answer 2

一种方法是，您可以为每个模块内的组件确定一些通用路径名（例如，如何为模块1设置“主目录”）。然后

  `const routes: Routes = [
   { path: 'home', loadChildren: () => import('./core/core.module').then(m => m.CoreModule) }
   { path: 'module2', loadChildren: () => import('<path to module>').then(m => m.module2) }
   { path: 'module3', loadChildren: () => import('<path to module>').then(m => m.module3) }
 ];`

然后在每个模块中，您也可以为每个组件定义路径

`const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'asset/:id', component: AssetComponent },
  { path: 'sub/:id', component: SubCategoryComponent },
];`

这样，仅加载包含与路径匹配的组件的模块。

具有延迟加载和子路由设置的角度

2 个答案: