Angular 2 routerState 出口始终是主要的

Question

我有一个带有主路由器插座和辅助路由器插座的应用程序， 这是我的两个路由器插座的模板

    <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 始终是“主要”，即使当前路线是“正确的”

（我尝试在子组件和模块中进行监听，但总是得到相同的行为）

这是一个具有上述行为的 plunker https://plnkr.co/edit/csIWByyMSziTaAgmhTuC?p=preview

Answer 1

您可以使用ActivatedRoute来监听当前路由。

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

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

通过上面的使用，您将获得当前激活的路由器插座名称。

---

编辑：在 right1 组件中检查它

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

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

  }
}