각도가 느슨하게로드 된 모듈 하위 경로로 직접 이동합니다.

Question

각도 모듈을 느리게로드했으며 example.module을 호출했습니다. example.module에는 a.component와 b.component라는 두 개의 다른 구성 요소와 a와 b 두 가지 하위 구성 요소가 있습니다.

내가 원하는 것은 모듈이 라우터에서로드되었을 때 사용자가 부모 라우팅에서 선택한 경로를 기반으로 두 구성 요소 중 하나에 직접 라우팅 할 수 있다는 것입니다.

제가 생각할 수있는 유일한 해결 방법은 두 개의 완전히 다른 모듈을 만드는 것입니다. 각각의 모듈은 독립적으로로드되는 세 번째 공유 모듈에있는 공통 코드로 독립적으로로드됩니다. 그게 훨씬 더 많은 템플릿 코드와 내가 내 전체 응용 프로그램을 통해 생산 해야하는 파일처럼 내가 프로그래밍 방식으로 경로 중 하나를로드 lazyloaded 구성 요소에 신호 수있는 몇 가지 방법이되는 것 같습니다.

 RouterModule.forChild(
     [ 
      { 
      path: "", 
      redirectTo: "component-a" // How do I go to A or B? 
      }, 
      { 
      path: "component-a", 
      component: ComponentA 
      }, 
      { 
      path: "component-b", 
      component: ComponentB 
      }, 
     ] 

주제에 대한 도움과 지식에 감사드립니다.

편집 - 요청 된 루트 라우팅.

const appRoutes: Routes = [ 
    { 
    path: "example", 
    loadChildren: "./example.module#ExampleModule", 
    }, 
]; 

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

은 쿵하는 소리 - https://embed.plnkr.co/uiLFu0EBZ00F8sLH836w/

Answer 1

게으른로드 된 모듈 작업이 같은 열망로드 된 모듈을 취급한다을 .forChild(routes)에서 지정한 라우트 구성이 단일 응용 프로그램 전체 구성으로 병합됩니다.

export const routes: Routes = [ 
    { path: 'crisis-a', loadChildren: 'app/crisis/crisis.module#CrisisModule' }, 
    { path: 'crisis-b', loadChildren: 'app/crisis/crisis.module#CrisisModule' } 
]; 

을하고 .forChild()

const routes: Routes = [ 
    { path: 'crisis-a', component: CrisisListComponentA }, 
    { path: 'crisis-b', component: CrisisListComponentB }, 
]; 

그래서 일단 합병에 다음과 같은 구성해야합니다 :

그래서 특정 경우에 당신은 forRoot에 정의

export const routes: Routes = [ 
    { 
    path: 'crisis-a', 
    children: [ 
     { path: 'crisis-a', component: CrisisListComponentA }, 
     { path: 'crisis-b', component: CrisisListComponentB } 
    ] 
    { 
    path: 'crisis-b', 
    children: [ 
     { path: 'crisis-a', component: CrisisListComponentA }, 
     { path: 'crisis-b', component: CrisisListComponentB } 
    ] 
    } 
]; 

을 따라서 CrisisListComponentB으로 이동하려는 경우 /crisis-b으로 전체 URL을 지정해야합니다.

/crisis-b/crisis-b 

Answer 2

나는 그들이 적절 모듈이 해결되면 경로에 canActivate 가드를 만들 것입니다.

RouterModule.forChild(
[ 
    { 
    path: "", 
    canActivate: [RootRouteGuard] 
    }, 
    { 
    path: "component-a", 
    component: ComponentA 
    }, 
    { 
    path: "component-b", 
    component: ComponentB 
    }, 
] 

을 그리고 가드는 다음과 같이 보일 것이다 :

업데이트 경로가되게합니다

@Injectable() 
export class RootRouteGuard implements CanActivate { 

    constructor(private router: Router) {} 

    public canActivate(route: ActivatedRouteSnapshot) { 
    if (/* Logic */) { 
     this.router.navigateByUrl('component-a'); 
    } else { 
     this.router.navigateByUrl('component-b'); 
    } 
    } 
}