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]
})

以下是我的内部/子模块：

  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]
    })

对于主路由器出口和内部路由器出口，我有两个不同的模板。这就是为什么我想将路径作为空白从内部/子模块重定向到主模块的原因。提前致谢。

Answer 1

您的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' }]
        ]
    }
];

Answer 2

您能否尝试给子模块提供路径名，并使用该路径路由到子模块，并给空模块提供主模块的空路径，以便它是在路径为空时加载的模块。

 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]
})

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

2 个答案: