2017-09-29 17 views
0

각도 응용 프로그램에서 두 콘센트를 탐색하고 싶습니다. 모든두 라우터 출력 간을 이동하십시오.

첫째, 내 첫 번째보기 : app.html :

<div> 
    <some-navbar></some-navbar> 
    <div class="application__router-wrapper"> 
    <router-outlet></router-outlet> 
    </div> 
</div> 

을 그리고 내 경로 정의 :

다음
<div class="app"> 
    <router-outlet></router-outlet> 

    <router-outlet name="application"></router-outlet> 
</div> 

, 일부 어린이를위한 래퍼가 내 application.html 템플릿, 상태

export const routes: Routes = [ 
    { 
    path: 'login', 
    component: LoginComponent, 
    data: { state: 'LOGIN' } 
    }, 
    { 
    path: 'register', 
    component: LoginComponent, 
    data: { state: 'REGISTER' } 
    } 
    }, 
    { 
    path: 'application', 
    component: ApplicationComponent, 
    outlet: 'application', 
    children: [ 
     { 
     path: 'notes', 
     component: NotesComponent 
     }, 
     { 
     path: 'reminders', 
     component: RemindersComponent 
     } 
    ] 
    }, 
    { 
    path: '', 
    redirectTo: '/login', 
    pathMatch: 'full' 
    }, 
]; 

리디렉션을 수행하는 로그인 기능 :

login() { 
    this.router.navigate(['/application/notes']); 
} 

그래서 내 문제가 무엇 : 나는 쉽게 naviage 로그인 사이 (나는이 두 가지 견해에 대해 하나 개의 구성 요소를 사용) 뷰를 등록 할 수 있습니다,하지만 난 응용 프로그램/노트를 얻을 수 없습니다. 오류가 나타납니다 :

Error: Cannot match any routes. URL Segment: 'application/notes' 

그래서 내가 뭘 잘못하고있는거야? 내 코드의 실수는 어디에 있습니까?

+0

를 사용해야합니다. 응용 프로그램 경로에 대해 별도의 모듈을 만듭니다. –

답변

0

당신은 당신이 게으른 로딩에 접근해야한다고 생각

this.router.navigate(['', { outlets: { application: ['application', 'notes'] } }]); 

// or (I'm not sure which one) 

this.router.navigate(['', { outlets: { application: ['notes'] } }]); 
+0

첫 번째 버전을 시도했는데 내 URL은 http : // localhost : 4200/login (응용 프로그램 : 응용 프로그램/메모)과 같습니다. 두 번째 버전이 작동하지 않습니다. – TheOpti