2016-11-11 3 views
1

Ich habe eine App mit einem primären Router-Ausgang und ein Hilfs Router-Oultet, dies ist meine Vorlage mit beide Router-Ausgang desAngular 2 routerState Ausgang ist immer primärer

<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> 

diese Definitionen meiner Strecke

sind

In der App-Komponente habe ich einen Listener an router.events angeschlossen und ich würde gerne wissen, auf welcher Steckdose die aktuelle Navigation behandelt wird.

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); 
    } 
    }) 
    } 
} 

das Problem ist, dass routerState.root.outlet ist immer ‚primäre‘, auch wenn die aktuelle Route ist ‚richtig‘

(Ich habe versucht, in untergeordneten Komponenten und in dem Modul zu hören und ich immer das gleiche Verhalten bekommen)

Hier ist ein Plunker mit dem obigen Verhalten https://plnkr.co/edit/csIWByyMSziTaAgmhTuC?p=preview

Antwort

1

Sie ActivatedRoute verwenden können, um die aktuelle Route zu hören.

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

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

Durch die Verwendung von oben erhalten Sie aktuelle aktiviert Router Outlet-Name.


EDIT: es in right1 Komponente prüfen

@Component({ 
    selector : "right1", 
    template : "this is right1" 
}) 
export class Right1{ 

    constructor(router:Router, route:ActivatedRoute){ 
    console.log("Right1 route.outlet (ActivatedRoute) is:",route.outlet); 

    } 
} 
+0

Dies wird auch zeigen, "primäre" immer, Ich habe es zu dem oben Plunker – yoelp

+0

Check in Right1 Komponente – Sanket

+0

Im right1 Komponente, es ist in der Tat richtig, und es ist immer 'richtig', auch wenn in der primären Steckdose, gibt es eine Möglichkeit zu wissen, auf welche Navigation, welche Steckdose wird es beeinflussen? – yoelp

Verwandte Themen