obtain the current outlet name in case of a multiple named router outlet

4
votes

In our angular 4 application we have multiple named router outlets. So the url is like : http://localhost:3000/main/(outletName1:Printers//outletName2:Printers)

Let's suppose one component is displayed in one particular named router outlet. Component has injected in constructor the Router, the ActivatedRoute, etc.

How can the component retrieve the name of the router outlet from those injected objects (or others if possible) ?

1
angularrouternamedrouter-outlet

1 Answers

1
votes

I think you can get all the named outlets via RoutesRecognized event. Below is a sample code. 

this.router.events.filter((event) => event instanceof RoutesRecognized).subscribe((result) =>  {
  console.log(result);
  const routesRecognizedEvent =  <RoutesRecognized>result;
  const state = routesRecognizedEvent.state;

  if( state && state.root ) {
    const root = state.root;

    const children = root.children;

    const allOutlets =  children.map(c => c.outlet);

    // allOutlets contains outletnames of current activated route



  }
});