我们有组件(ka-cockpit-panel),它没有映射到任何路线,而是手动插入到其他组件中,如下所示:
..
...
<section class="ka-cockpit-panel cockpit-1 pull-left">
<ka-cockpit-panel></ka-cockpit-panel>
</section>
...
..
在这个组件中我想访问当前活动路线数据.
例如:如果我们有其他一些组件(比如说ka 集成组件)并且它有一些与之关联的路由数据(如下所示),每当我们导航到该组件(通过 url 或单击某个路由器链接)时,我们都希望访问 ka-cockpit-component 中的集成组件路由数据。
..
...
{
path: "",
component: IntegrationComponent,
data : {
cockpit1 : false,
cockpit2 : true,
kpi : true
},
}
..
...
基本上,我们希望为应用程序中的某些组件配置 ka-cockpit-component,这些组件映射到某些路线,以便我们可以隐藏/显示或更改其外观。
驾驶舱组件代码:
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() { }
}