[英]Access activated route data from some other component
We have component ( ka-cockpit-panel) which is not mapped to any route and inserted manually in the some other component as shown below : 我们有组件(ka-cockpit-panel)没有映射到任何路由并手动插入其他组件,如下所示:
..
...
<section class="ka-cockpit-panel cockpit-1 pull-left">
<ka-cockpit-panel></ka-cockpit-panel>
</section>
...
..
In this component i want to access the current active route data . 在此组件中,我想访问当前活动路由数据 。
For eg : if we have some other component ( say ka-integration-component ) and it has some route data associated with it ( as shown below ), whenever we navigate to this component ( via url or by clicking some routerlink ) , we want to access integration component route data in our ka-cockpit-component. 例如:如果我们有一些其他组件(比如ka-integration-component )并且它有一些与之关联的路由数据(如下所示),每当我们导航到这个组件时(通过url或点击一些routerlink),我们想要访问我们的ka-cockpit组件中的集成组件路径数据。
..
...
{
path: "",
component: IntegrationComponent,
data : {
cockpit1 : false,
cockpit2 : true,
kpi : true
},
}
..
...
Basically, we want to configure our ka-cockpit-component for certain components in our app which is mapped to some route so that we can hide / show or change its appearance. 基本上,我们想要为我们应用中的某些组件配置我们的ka-cockpit组件,这些组件映射到某个路由,以便我们可以隐藏/显示或更改其外观。
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() { }
}
You have to use Resolve Guard for the thing you want to implement. 您必须使用Resolve Guard来实现您想要实现的功能。
// MyDataResolver Service // MyDataResolver服务
import { Injectable } from '@angular/core';
import { Router, Resolve, RouterStateSnapshot,
ActivatedRouteSnapshot } from '@angular/router';
@Injectable()
export class MyDataResolver implements Resolve<any> {
constructor(private cs: CrisisService, private router: Router) {}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<any> {
let pathFromRoot = route.pathFromRoot;
// you can compare pathFromRoot with your route to return different data
return Promise.resolve({
cockpit1 : false,
cockpit2 : true,
kpi : true
});
}
}
// Routing configuration //路由配置
.
.
{
path: "",
component: IntegrationComponent,
resolve : {
data: MyDataResolver
},
}
.
.
// Component // 零件
export class CockpitPanelComponent implements OnInit {
someBinding : string = "testing Value";
constructor(private router:Router,private activatedRoute : ActivatedRoute) {
this.activatedRoute.data.subscribe( (res) => {
// here you will get your data from resolve guard.
console.log(res);
});
}
ngOnInit() { }
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.