Angular 2+: How to access active route outside router-outlet
Try this:
in app.component.ts
import { Component } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { filter, map, mergeMap } from 'rxjs/operators';
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
showSidebar$: Observable<boolean>;
private defaultShowSidebar = true;
constructor(
private router: Router,
private activatedRoute: ActivatedRoute,
) {
this.showSidebar$ = this.router.events.pipe(
filter(e => e instanceof NavigationEnd),
map(() => activatedRoute),
map(route => {
while (route.firstChild) {
route = route.firstChild;
}
return route;
}),
mergeMap(route => route.data),
map(data => data.hasOwnProperty('showSidebar') ? data.showSidebar : this.defaultShowSidebar),
)
}
app.component.html
<aside *ngIf="showSidebar$ | async">Sidebar here</aside>
<router-outlet></router-outlet>
<a routerLink="/without-sidebar">Without sidebar</a>
<a routerLink="/with-sidebar">With sidebar</a>
<a routerLink="/without-data">Without data.showSidebar</a>
app routes
RouterModule.forRoot([
{ path: 'with-sidebar', component: WithSidebarComponent, data: { showSidebar: true } },
{ path: 'without-sidebar', component: WithoutSidebarComponent, data: { showSidebar: false } },
{ path: 'without-data', component: WithoutDataComponent },
])
You can modify it as you please.
Live demo
To get the active route without subscribing to router events, you can simply use a while loop recursively to find the lowest child.
private getActivatedRoute(): ActivatedRoute {
let route = this.router.routerState.root;
while (route.firstChild) {
route = route.firstChild;
}
return route;
}
Sure. you can filter router events and get only activated routes, and then, you can find some info about each route inside (sorry, can't really say right now, but as I remember, you should get only "activated right now" routes, which looks like what you're searching for):
constructor(private _router: Router) {
_router.events
.filter(event => event instanceof NavigationEnd)
.forEach(item => {
console.log(item);
console.log(_router.routerState.root);
console.log(_router.routerState.root.firstChild);
});
}