Angular 2 new Router: Jak uzyskać parametry routera komponentu potomnego?

Question

W najnowszej wersji @angular/router3.0.0-rc.1 Sposób zmiany parametrów adresu URL/trasy.

Na podstawie dokumentacji this powinieneś być w stanie uzyskać params, subskrybując parametry, ale w moim przypadku wydaje się, że nie działa.

Co chcę osiągnąć, to wprowadzić parametry do mojego elementu macierzystego z tras dla dzieci.

Na przykład załóżmy, że jest to moje trasy:

const routes: Routes = [ 
    { 
    path: 'parent', 
    component: ParentComponent, 
    pathMatch: 'prefix', 
    children: [ 
     { 
     path: ':id', 
     component: ChildComponent 
     } 
    ] 
    } 
]; 

chcę uzyskać parametr id i używać go w moim ParentComponent. Więc próbuję tak:

export class ParentComponent implements OnInit { 

    sub: any; 
    constructor(
    private route: ActivatedRoute) { 
    this.route = route; 
    } 

    ngOnInit() { 

    this.sub = this.route.params.subscribe(params => { 
    let id = params['id']; 
    console.log(id); 
    }); 

    } 

} 

Jak to dostaję:

Undefined

Co ja tu brakuje?

Answer 1

Moduł pobierający uzyskuje dostęp do informacji o ścieżce nadrzędnej/podrzędnej.

W celu uzyskania dostępu do pierwszej trasy dziecko od rodzica, należy użyć:

this.route.firstChild.params

Jeśli chciałeś wszystkie szlaki dziecko będzie użyć właściwości children. To zwraca tablicę ActivatedRoute

this.route.children

Jeżeli jesteś w trasie, dzieci i potrzebnych parametrów od rodzica:

this.route.parent.params

Answer 2

Dziecko parametry są powiązane/przechowywać z dzieckiem ActivatedRoute. Nie są one dostępne w aktywowanym pliku Parent's Parent. Musisz najpierw uzyskać ActivatedRoute dziecka za pomocą gettera firstChild lub children.

Następnie rodzic może albo zapisać się do zmian parametrów podrzędnych:

import { Component, OnInit, OnDestroy } from '@angular/core'; 
import { ActivatedRoute }    from '@angular/router'; 
import { Subscription }     from 'rxjs/Subscription'; 

export class ParentComponent implements OnInit, OnDestroy { 
    private sub: Subscription; 
    constructor(private route: ActivatedRoute) {} 
    ngOnInit() { 
     this.sub = this.route.firstChild.params.subscribe(
     params => console.log(params.id)); 
    } 
    ngOnDestroy() { 
     this.sub.unsubscribe(); 
    } 
} 

lub może uzyskać zrzut parametrów dziecko:

import { Component }  from '@angular/core'; 
import { ActivatedRoute } from '@angular/router'; 

export class ParentComponent { 
    constructor(private route: ActivatedRoute) {} 
    someMethod() { 
     console.log(this.route.firstChild.snapshot.params.id); 
    } 
} 

Jeśli chcesz, aby wszystkie dzieci (np. jeśli masz wiele punktów sprzedaży), użyj ActivatedRoute.children lub ActivatedRouteSnapshot.children, aby uzyskać tablicę aktywnych dzieci ActivatedRoutes lub child ActivatedRouteShapshots.

Answer 3

Za pomocą this.activatedRoute.snapshot.firstChild.params