角2：ルータアウトレットの外から経路のパラメータを取得するにはどうすればいいですか？

Question

類似の質問Angular2 Get router params outside of router-outletになりますが、リリースバージョンのAngular 2（ルータのバージョン3.0.0）をターゲットにしています。私は連絡先のリストと選択された連絡先を表示または編集するためのルーターアウトレットを持つアプリを持っています。適切な連絡先がいつでも選択されていることを確認したい（ページの読み込みを含む）ので、ルートが変更されるたびに "id"パラメータをルートから読み取ることができるようにしたいと考えています。

私はルーターのイベントプロパティに登録することでルーティングイベントを手に入れることができますが、Eventオブジェクトを使用すると、解析されていないバージョンのraw URLにアクセスできます。私はルータのparseUrlメソッドを使ってそれを解析することができますが、これのフォーマットは特に役に立たず、やや脆くなるので、むしろ使いたいと思います。私はルーティングイベントのルータのrouterStateプロパティにも注意しましたが、paramsは常にスナップショットの空のオブジェクトです。

これを実行する実際の単純な方法は、私が見逃したことはありますか？これを動作させるために変更することのないルータのコンセントにコンタクトリストを入れる必要がありますか？

Answer 1

私はこの問題を1日中苦労していましたが、私は最終的には、特にルーターイベントの1つを聞いてこれを行う方法を考え出したと思います。それはちょっと難しい（醜い？）が、今日の時点では、少なくとも最新バージョンのAngular（4.x）とAngular Router（4.x）で動作しています。このコードは、将来何かを変更しても機能しない可能性があります。

基本的には、ルートのパスを取得してから、自分でカスタムパラメータマップを再構築する方法を見つけました。

だから、ここにある：

import { Component, OnInit } from '@angular/core'; 
import { Router, RoutesRecognized } from '@angular/router'; 

@Component({ 
    selector: 'outside-router-outlet', 
    templateUrl: './outside-router-outlet.component.html', 
    styleUrls: ['./outside-router-outlet.component.css'] 
}) 

export class OutSideRouterOutletComponent implements OnInit { 
    path: string; 
    routeParams: any = {}; 

    constructor(private router: Router) { } 

    ngOnInit() { 
    this.router.events.subscribe(routerEvent => { 
     if (routerEvent instanceof RoutesRecognized) { 
      this.path = routerEvent.state.root['_routerState']['_root'].children[0].value['_routeConfig'].path; 
      this.buildRouteParams(routerEvent); 
     } 
    }); 
    } 

    buildRouteParams(routesRecognized: RoutesRecognized) { 
    let paramsKey = {}; 
    let splittedPath = this.path.split('/'); 
    splittedPath.forEach((value: string, idx: number, arr: Array<string>) => { 
     // Checking if the chunk is starting with ':', if yes, we suppose it's a parameter 
     if (value.indexOf(':') === 0) { 
     // Attributing each parameters at the index where they were found in the path 
     paramsKey[idx] = value; 
     } 
    }); 
    this.routeParams = {}; 
    let splittedUrl = routesRecognized.url.split('/'); 
    /** 
    * Removing empty chunks from the url, 
    * because we're splitting the string with '/', and the url starts with a '/') 
    */ 
    splittedUrl = splittedUrl.filter(n => n !== ""); 
    for (let idx in paramsKey) { 
     this.routeParams[paramsKey[idx]] = splittedUrl[idx]; 
    } 
    // So here you now have an object with your parameters and their values 
    console.log(this.routeParams); 
    } 
}