アクセス活性化された経路データ

Question

我々は、以下に示すように任意の経路にマッピングされ、いくつかの他の成分中に手動で挿入されていない成分（KA-コックピットパネル）を有する：このコンポーネントで

.. 
... 
<section class="ka-cockpit-panel cockpit-1 pull-left"> 
      <ka-cockpit-panel></ka-cockpit-panel> 
</section> 
... 
.. 

を私はの現在アクティブなルートデータにアクセスしたいと思います。

たとえば、他のコンポーネントがある場合（例：ka-integration-component）、このコンポーネントに移動するたびに（urlまたはclickを使用して）いくつかのルータリンク）、私たちはka-cockpitコンポーネントの統合コンポーネントルートデータにアクセスする必要があります。

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

は基本的に、我々は表示/非表示またはその外観を変更することができるように、いくつかのルートにマップされている我々のアプリ内の特定のコンポーネントのために私たちのKA-コックピット・コンポーネントを構成します。

コックピットコンポーネントコード：

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

Answer 1

あなたが実装したいもののためにResolve Guardを使用する必要があります。

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

    } 
} 

//設定をルーティング

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