Question

我有一些模块：＆＃34;仪表板＆＃34;，＆＃34;家庭＆＃34;和＃34;孩子＆＃34;。除了＆＃34; childen＆＃34;模块：

export const appRoutes: Routes = [
  { path: '', loadChildren: 'app/dashboard/dashboard.module#DashboardModule' },
  { path: 'family', loadChildren: 'app/family/family.module#FamilyModule' },
  {
    path: '404',
    component: Error404PageComponent,
    resolve: { data: Error404PageResolver }
  },
  {
    path: '**',
    component: Error404PageComponent,
    resolve: { data: Error404PageResolver }
  }
];


@NgModule({
  imports: [ RouterModule.forRoot(appRoutes, {
    preloadingStrategy: PreloadAllModules,
    useHash: false
  }) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

我的家庭路线文件是这样的：

const familyRoutes: Routes = [
    {
        path: '',
        component: FamilyComponent
    {
        path: ':id',
        component: FamilleComponent     
];

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

对于我的孩子＆＃34;模块，除了在路线上几乎是一样的，路线的第一部分包含家庭路线：

const childRoutes: Routes = [
  {
    path: 'family/:familyId/child',
    component: ChildComponent
  },
  {
    path: 'family/:familyId/child/:id',
    component: ChildComponent
  }
];

我想懒得加载孩子＆＃34;模块，但我不知道该怎么做，因为这个模块是模块＆＃34; family＆＃34;的孩子。我的问题是与儿童相关的路线不可用。所以网址 http://localhost:4200/family/830503261/child/830581020无效。

我尝试在familyRoutes中添加loadChildren行，但不能正常工作：

const familleRoutes: Routes = [
    {
        path: '',
        component: FamilyComponent
    {
        path: ':id',
        component: FamilyComponent,     
        loadChildren: './../child/child.module#ChildModule' 
];

我不知道如何使用路径＆＃34;家庭＆＃34;在路线上。

有什么想法吗？感谢。

Answer 1

您应该将childModule配置为家庭路线的子女

    const familyRoutes: Routes = [
        {
            path: '',
            component: FamilyComponent
        },
        {
            path: ':id',
            component: FamilleComponent,
            children: [
                'path': 'child',
                'loadChildren': './../child/child.module#ChildModule', // <- or whatever path

            ]
        }

    ];

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

并更改childModule的路由

const childRoutes: Routes = [
  {
    path: '',
    component: ChildComponent
  },
  {
    path: ':id',
    component: ChildComponent
  }
];

Answer 2

感谢您的回复。这是工作。我只想添加{}：

children: [
            {
                path: 'child',
                loadChildren: './../child/child.module#ChildModule'
            }
        ],

我有另一个问题。在我的孩子路线文件中，我还有一个警卫和其他东西：

const childRoutes: Routes = [
  {
    path: '',
    component: ChildComponent,
    resolve: { user: AuthResolver, referentiel: ReferentielChildResolver },
    canActivate: [ChildActivateGuard]

  },
  {
    path: ':id',
    component: ChildComponent,
    resolve: { user: AuthResolver, child: ChildResolver, referentiel: ReferentielChildResolver },
    canActivate: [ChildActivateGuard]
  }
];

在我的ChildActivateGuard中，我想拥有我家人的身份：

Injectable()
export class EleveActivateGuard implements CanActivate {

  can: boolean;
  constructor(private childService: ChildService, public http: HttpService) 
  { }

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {

    debugger;
    console.log(route.parent.params["familyId"]);
    ....
   }

但param familyId未定义。我不知道缺少什么？谢谢您的帮助。

Answer 3

感谢皮埃尔的评论。

我找到了解决方案。即使我不确定它是最好的解决方案，但它正在我的子组件的保护文件中工作：

 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {

    var familyIdId = route.parent.parent.url[0].path;
    ...

Angular Lazy loaded module - 子路由中的问题

3 个答案: