Köşeli 2: Bir yönlendiricinin çıkışından nasıl bir yol izlerim?

Question

Benzer soru Angular2 Get router params outside of router-outlet'a benzer ancak Angular 2'nin yayın sürümünü (yönlendiricinin 3.0.0 sürümü) hedefler. Seçilen kişiyi görüntülemek veya düzenlemek için kişi listesi ve yönlendirici çıkışlı bir uygulamanız var. Herhangi bir noktada (sayfanın yüklenmesi dahil) doğru kontağın seçildiğinden emin olmak istiyorum, bu yüzden rota değiştirildiğinde rotadan "id" parametresini okuyabilmek istiyorum.

Yönlendiricinin olaylar özelliğine abone olarak, rotalarımı olaylarıma gönderebilirim, ancak Event nesnesine, yalnızca ayrıştırılmış bir sürümü değil, ham URL'ye erişmemi sağlıyor. Yönlendiricinin parseUrl yöntemini kullanarak ayrıştırabilirim, ancak bunun formatı özellikle yararlı değildir ve oldukça kırılgan olur, dolayısıyla kullanmayı tercih ederim. Yönlendirme olaylarında yönlendiricinin routerState özelliğine de baktım, ancak params her zaman anlık görüntüde boş bir nesnedir.

Bunu özlemiş olduğum gerçek bir ileri yol var mı? Bu listeyi çalışmak için hiçbir zaman değişmeyen bir yönlendirici çıkışında kişi listesini sarmak zorunda mıyım yoksa böyle bir şey mi?

Answer 1

Bütün gün boyunca bu sorunla uğraşıyordum, ama sonunda bunu özellikle yönlendirici olaylardan birini dinleyerek nasıl yapacağımıza karar verdiğimi düşünüyorum. Hazır olun, biraz zor (çirkin?), Ama bugün itibariyle en azından Angular (4.x) ve Açısal Yönlendiricinin (4.x) en son sürümü ile çalışıyor. Bu kod parçası, bir şeyi değiştirirse gelecekte çalışmayabilir.

Temel olarak, yolun yolunu bulmak için bir yol buldum ve daha sonra özel bir parametre haritasını kendi başıma yeniden oluşturdum.

Yani işte burada:

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