角度の遅い読み込みモジュール - 子ルートの問題

Question

"ダッシュボード"、 "家族"、 "子供"のモジュールがあります。これらのモジュールは、「childen」モジュールを除いて、私のappRouteで遅延ロードされている：

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 { } 

そして、私の「子」のモジュールのために、それはほとんどですルートを除いて同じことが、ルートの最初の部分は、家族のルートが含まれています

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

私は怠惰な負荷に「子」モジュールをしたいと思いますが、このモジュールがあるので、私はそれを行う方法がわかりません子供のモジュール "ファミリ"。 私の問題は、子供にリンクされたルートが利用できないことです。 したがって、URL http://localhost:4200/family/830503261/child/830581020は機能しません。

私はfamilyRoutesに行loadChildrenを追加しようとしましたが、動作していない：

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

私はルートにパス「家族」を使用して、私の子供たちにアクセスする方法を知りません。

おかげさまで

Answer 1

あなたは家族のルート

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

あなたchildModuleのルートを変更するご返信いただきありがとうございます。それは働いている。私はちょうど{}を追加します：

私は別の質問があります。私の子供のルートファイルでは、私はまた、ガードや他のものがあります。しかし、

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は未定義です：私のChildActivateGuardで

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

を、私は私の家族のIDを持っていると思います。私は何が欠けているのか分からないのですか？ ありがとうございます。

Answer 3

コメントありがとうございます。

解決策が見つかりました。私はそれが最善の解決策であるかわからないが、それは私の子コンポーネントのガードファイルで作業されている場合でも：plunkerなければ

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

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