Angular 延迟加载子模块空白路径重定向到 appModule

Question

我正在处理 Angular 6 项目。自最近几天以来，我陷入了以下问题。请指导。

我的程序基于惰性路由，也有动态路由。以下代码是我的app-routing.module.ts:

 const routes: Routes = [
      {
        path: 'login',
        loadChildren: './login/login.module#LoginModule'
      },
     // Here is my submodule 
      {
        path: '',
        loadChildren: './users/users.module#UsersModule'
      },
     // This is actually i want use to home page as blank 
      {
        path: '',
        loadChildren: './home/home.module#HomeModule'
      },
      { path: '**', redirectTo: 'not-found' }
    ];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

以下是我的inner/submodule：

  const routes: Routes = [
    {
    path: '',
     component: UsersComponent,
    children: [
        // How can redirect to the main route
    { path: '', redirectTo: '', pathMatch: 'full' },
    { path: ':slug', loadChildren: './inner1/inner1.module#Inner1Module' },
    { path: ':slug/:slug2', loadChildren: './inner2/inner2.module#Inner2Module' }
    ]
    }];
    @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
    })

我有两个不同的主路由器插座和内部路由器插座模板。这就是为什么我想将路径从 inner/sub 模块重定向到主模块的空白。提前致谢。

Answer 1

你能不能尝试给你的子模块一个路径名，然后使用那个路径路由到你的子模块，给 home 模块一个空路径，这样当路径为空时它就是加载的模块。

 const routes: Routes = [
      {
        path: 'login',
        loadChildren: './login/login.module#LoginModule'
      },
     // Here is my submodule 
      {
        path: 'user-module',
        loadChildren: './users/users.module#UsersModule'
      },
     // This is actually i want use to home page as blank 
      {
        path: '',
        loadChildren: './home/home.module#HomeModule'
      },
      { path: '**', redirectTo: 'not-found' }
    ];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

Answer 2

您的 userModule 路由规则应如下所示。检查如何在下面构建延迟加载模块 link

export const RouteConfig: Routes = [
    {
        path: '',
        component: UsersComponent,
        canActivate: [AuthGuard],
        children: [
               { path: '', component: UserPage , children: [
               { path: ':slug', component: 'Inner1Component' },
               { path: ':slug/:slug2', component: 'Inner2Component' }]
        ]
    }
];

Angular 延迟加载子模块空白路径重定向到 appModule

Angular lazy load submodule blank path redirect to appModule

angular2-routing

angular