Get child routes data in parent component

Question

In my angular module routing I've got a parent component containing child components as tabitems.

The routing:

{
    path: "teacher/:id", component: TeacherTabcontrolComponent,
    children: [
        { path: 'dialogue', component: TeacherTabpageDialoguesComponent, data: { title: 'Dialoge' } },
        { path: 'settlements', component: TeacherTabpageSettlementsComponent, data: { title: 'Settlements' } },
        { path: 'timesheets', component: TeacherTabpageTimesheetsComponent, data: { title: 'Timesheets' } },
        { path: 'transactions', component: TeacherTabpageTransactionsComponent, data: { title: 'Transactions' } },
    ]
},

The tabbed control in TeacherTabcontrolComponent:

<ul class="nav nav-tabs">
  <li routerLinkActive="active"><a [routerLink]="['dialogue']">Dialogue</a></li>
  <li routerLinkActive="active"><a [routerLink]="['transactions']">Transactions</a></li>
  <li routerLinkActive="active"><a [routerLink]="['settlements']">Settlements</a></li>
  <li routerLinkActive="active"><a [routerLink]="['timesheets']">Timesheets</a></li>
</ul>
<div class="tab-content">
  <router-outlet></router-outlet>
</div>

In the parent component TeacherTabcontrolComponent I need to access the data {title: ...} from the routing. I tried the following in my .ts code:

constructor(
    private _route: ActivatedRoute,
) {
    this._route.url.subscribe((e) => {
        console.log(e, this._route.snapshot.firstChild.data);
    });
}

This works nicely, but only on entering the parent component the first time. When I switch from one child to another, no event is fired.

How do I get a notification when navigating from one child to another?

Answer 1

You can subscribe for router.events in parent component. So that on each route change you can get the routed child data.

constructor(private _route: ActivatedRoute, private _router: Router)

this._router.events
.filter(event => event instanceof NavigationEnd)
 .subscribe(
    () => {
       console.log(this._route.snapshot.firstChild.data);
    }
);