2016-11-11 11 views
1

ある これは、これは私のルートの定義であるルータ・コンセントの角度2 routerStateコンセントが、私はプライマリルータ・コンセントと補助ルータ-oultetでアプリを持って常にプライマリ

<div> 
     <!-- links to primary outlet --> 
     <a routerLink="/">left 1</a><br> 
     <a routerLink="/left2">left 2</a><br> 
     <!-- links to right outlet --> 
     <a [routerLink]="[{outlets:{right:'right1'}}]">right 1</a><br> 
     <a [routerLink]="[{outlets:{right:'right2'}}]">right 2</a><br> 
     <a [routerLink]="[{outlets:{right:null}}]">clear right</a><br> 
    </div> 
    <div style="width:48%;float:left;border:1px solid red;margin-top:20px;padding:2px;"> 
    <h2>Primary Outlet</h2><hr/> 

    <router-outlet></router-outlet> 
    </div> 
    <div style="width:48%;float:right;border:1px solid green;margin-top:20px;padding:2px;"> 
    <h2>Right Outlet</h2><hr/> 
    <router-outlet name="right"></router-outlet> 
    </div> 

両方と私のテンプレートです

RouterModule.forRoot([ 
    { 
    path : "", 
    component : Left1 
    }, 
    { 
    path : "left2", 
    component : Left2 
    }, 
    { 
    path : "right1", 
    outlet:'right', 
    component : Right1 
    }, 
    { 
    path : "right2", 
    outlet:'right', 
    component : Right2 
    } 
] 

router.eventsにリスナーを添付しました。どのコンセントが現在のナビゲーションを処理しているか知りたいと思います。

export class App { 
    private evtSub; 
    constructor(router:Router){ 
    this.evtSub = router.events.subscribe(e=>{ 
    //I assume this would log the current routes outlet, but it always logs 'primary' 
    console.log("router.routerState.root.outlet is::", router.routerState.root.outlet); 
    if(e instanceof RoutesRecognized){ 
     //this would sure log the current route since we are on the route event, but still no luck 
     console.log("RoutesRecognized outlet is ::",e.state.root.outlet); 
    } 
    }) 
    } 
} 

問題はrouterState.root.outletは(私は子コンポーネントで、モジュールに聞きしようとしましたが、私はいつも同じ動作を得る)現在のルートが

「正しい」の場合でも、常に「主」であるということですここで

はあなたが現在のルートに耳を傾けるActivatedRouteを使用することができます上記の動作とplunker https://plnkr.co/edit/csIWByyMSziTaAgmhTuC?p=preview

答えて

1

です。

constructor(private actRoute: ActivatedRoute){} 
.... 

console.log(this.actRoute.outlet.toString()); 

上記を使用すると、現在アクティブになっているルータのアウトレット名が表示されます。


EDIT:はRIGHT1コンポーネントでそれを確認してください

また、これは常に、私はそれは確かだRIGHT1部品においてRIGHT1コンポーネント
+0

右、そしてそれはいつも「右」で、一次コンセントでルーティングするときでさえ、どのコンセントがそれに影響を与えるかをナビゲーションで知る方法はありますか? – yoelp

+0

チェックに追加して、「主」と表示されます

@Component({ selector : "right1", template : "this is right1" }) export class Right1{ constructor(router:Router, route:ActivatedRoute){ console.log("Right1 route.outlet (ActivatedRoute) is:",route.outlet); } } 
Sanket

+0

上記plunker – yoelp

関連する問題