从其他组件访问已激活的路线数据

问题描述

我们有一个组件(ka-cockpit-panel)，它没有映射到任何路线，而是手动插入到其他组件中，如下所示:

We have component ( ka-cockpit-panel) which is not mapped to any route and inserted manually in the some other component as shown below :

..
...
<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.

例如:如果我们有其他组件(例如 ka-integration-component )，并且有一些与之相关的路线数据(如下所示)，则每当我们导航到该组件时(通过url或通过单击一些routerlink)，我们要访问ka-cockpit-component中的集成组件路由数据.

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.

 ..
    ...
    {
        path: "",
        component: IntegrationComponent,
        data : {
            cockpit1 : false,
            cockpit2 : true,
            kpi : true
        },
    }
    ..
    ...

基本上，我们要为应用程序中的某些组件配置我们的ka-cockpit-component，该组件已映射到某些路线，以便我们可以隐藏/显示或更改其外观.

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.

座舱组件代码:

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() { }
}

推荐答案

您必须使用为您要实现的目标解决后卫.

//MyDataResolver服务

// MyDataResolver Service

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
    });

  }
}

//路由配置

.
.
{
    path: "",
    component: IntegrationComponent,
    resolve : {
        data: MyDataResolver
    },
}
.
.

//组件

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() { }
}

这篇关于从其他组件访问已激活的路线数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！