2つのルータアウトレット間を移動

Question

角度アプリケーションで2つのアウトレット間を移動したいと考えています。

まず、私の最初のビュー：app.html：

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

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

はその後、いくつかの子供のためのラッパーである私のapplication.htmlテンプレートは、状態：

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

そして、私のルート定義を：

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ログインの間と（私はこれらの二つのビューのための1つのコンポーネントを使用）ビューを登録することができますが、私は、アプリケーション/ノートを取得することはできません。エラーが表示されます：

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

私は間違っていますか？私のコードのミスはどこですか？

Answer 1

あなたは私はあなたが遅延読み込みにアプローチすべきだと思う

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

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

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