We are utilizing a component (ka-cockpit-panel) that is not linked to any route and manually inserted into another component like so:
..
...
<section class="ka-cockpit-panel cockpit-1 pull-left">
<ka-cockpit-panel></ka-cockpit-panel>
</section>
...
..
Within this component, our goal is to access the current active route data.
For example, if we have another component (let's say ka-integration-component) with associated route data (as illustrated below), whenever we navigate to this component (via URL or by clicking a router link), we aim to retrieve the integration component route data in our ka-cockpit-component.
..
...
{
path: "",
component: IntegrationComponent,
data : {
cockpit1 : false,
cockpit2 : true,
kpi : true
},
}
..
...
In essence, our objective is to configure our ka-cockpit-component for specific components within our application that are linked to certain routes so that we can modify its visibility/appearance as needed.
Cockpit component code :
import { Component, OnInit } from '@angular/core';
import { Router,Event,NavigationEnd,ActivatedRoute } from '@angular/router';
@Component({
selector: 'ka-cockpit-panel',
templateUrl: './cockpit-panel.component.html',
styleUrls : ['./cockpit-panel.component.scss']
})
export class CockpitPanelComponent implements OnInit {
constructor(private router:Router,private activatedRoute : ActivatedRoute) {
this.router.events.subscribe( (event:Event) => {
if(event instanceof NavigationEnd) {
console.log("Cockpit Panel Component : Route successfully changed - ",event,this.router,this.activatedRoute);
// THIS IS WHAT WE WANT - get Integration component route data here whenever i navigate to integration component!!!
}
});
}
ngOnInit() { }
}