経路が同じ2つの異なるコンポーネント

Question

私は認証されたユーザーコンポーネントとゲストユーザーのコンポーネントを分離する必要があるアプリケーションがあります。しかし、私は両方のコンポーネントが '/'ルートで読み込まれる必要があります。私は書いた

{ 
    path: 'desktop', 
    loadChildren: 'app/member/member.module#MemberModule', 
    canActivate: [LoggedInGuard], 
}, 
{ 
    path: '', 
    loadChildren: 'app/guest/guest.module#GuestModule', 
    canActivate: [GuestGuard], 
}, 

そしてそれは動作します。しかし、どのようにして、両方のコンポーネントが同じURLでロードされるのですか？ メンバーのモジュールルートにpath: ''を書き込もうとしましたが、2番目のルータールールは実行されませんでした。ここ はガードコードです：

LoggedInGuard：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 
    if(this.sessionService.isLoggedIn()) { 
     return true; 
    } else { 
     return false; 
    } 
} 

GuestGuard：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 
    if(!this.sessionService.isLoggedIn()) { 
     return true; 
    } else { 
     return false; 
    } 
} 

ここではplunkerです：私はそれを正しく行う必要がありますどのようにhttp://embed.plnkr.co/VaiibEVGE79QU8toWSg6/

？ありがとう

Answer 1

これを行う1つの方法は、ユーザーがログインしているかどうかに応じて適切なエリアにルーティングすることです。

（つまり、あなたが空白のルートまたはゲストのルートを開くかどうか、それは適切にリダイレクトされますと、戻るボタンが機能しません）

ルート：

{ 
    path: '', 
    loadChildren: 'app/member/member.module#MemberModule', 
    canActivate: [LoggedInGuard], 
}, 
{ 
    path: 'guest', 
    loadChildren: 'app/guest/guest.module#GuestModule', 
    canActivate: [GuestGuard], 
} 

LoggedInGuard：：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 
    if(this.sessionService.isLoggedIn()) { 
     return true; 
    } else { 
     // route to 'guest' if not logged in 
     this.router.navigate(['/guest'], { replaceUrl: true }); 
     return false; 
    } 
} 

ゲストガード（MemberComponentに自動ルートでログインしている場合）：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 
    if(this.sessionService.isLoggedIn()) { 
     // route to member area if already logged in 
     this.router.navigate(['/'], { replaceUrl: true }); 
     return false; 
    } else { 
     return true; 
    } 
} 

Answer 2

だから私は最終的にこれを行うことができました。 Angularはfirst matchポリシーを使用しているので、ガードタイプの方法でルートを照合して、適切なモジュールを持つ正しいルートが一致するようにする必要があります。

私たちが望む条件（ユーザータイプなど）でのみ一致するように、まずはmatchersというカスタムを追加する必要があります。私はAppModuleからのAuthServiceサービスを注射し、そしてユーザーがそれを入力し確認ここでは ：

{ 
path: 'samePath', 
matcher: firstMatcher, 
loadChildren: '../first/first.module#FirstModule' 
}, 
{ 
path: 'samePath', 
matcher: secondMatcher, 
loadChildren: '../second/second.module#SecondModule' 
} 

プログラムと照合コードは次のようなものです。したがって、ユーザーの種類に応じてルートを照合することができます。

import { applicationInjector } from '../../main'; 

export function firstMatcher (url: UrlSegment[]) { 
    const auth = applicationInjector.get(AuthService); 
    return auth.isUserType('admin') ? ({consumed: [url[0]]}) : null; 
} 

そして今、我々が必要とする唯一の事は、私たちのメインモジュールでapplicationInjectorを作成することですので、我々は我々のマッチャー機能にサービスを注入できました。

export let applicationInjector: Injector; 

platformBrowserDynamic().bootstrapModule(AppModule).then((componentRef) => { 
    applicationInjector = componentRef.injector; 
})