延迟加载的模块中的角路由根

时间:2019-03-21 16:16:10

标签: angular angular-routing

我有两个模块的应用程序: app.module 和延迟加载的模块 lazy-loaded.module。

我的网址是:

home
users/{userId}/
users/lazy/{id}
users/lazy/{id}/add
users/lazy/{id}/detail
users/lazy/{id}/detail/edit

AppRoutingModule:

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'users',
     children [
       { path: ':userId', component: UserComponent },
       { path: 'lazy', loadChildren: './lazy-loaded/lazy-loaded.module#LazyLoadedModule' }
     ]
  }

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

LazyLoadedRoutingModule:

const routes: Routes = [
  {
    path: ':id',

    children: [
      {
        path: '', component: LazyHomeComponent
      },
      {
        path: 'add', component: LazyAddComponent
      }, 
      {
        path: 'detail',
        children: [
          {
            path: '', component: LazyDetailComponent
          },
          {
            path: 'edit', component: LazyDetailEditComponent,
          }
        ]
      }
    ]
  }
];

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

在LazyLoadedModule内部,我想使用不带前缀 users 的url,例如:

<a [routerLink]="['detail', 'edit']">Detail edit</a>

在每个组件中,我都希望有一个共享的组件,可以在延迟加载的模块中导航。是否可以从 users / lazy 创建相对的路由?它应该类似于模块的根目录。

0 个答案:

没有答案