Угловой 2 новый маршрутизатор: как получить параметры маршрутизатора дочернего компонента?

Question

В последней версии @angular/router3.0.0-rc.1 Изменен способ изменения параметров с URL-адреса.

На основании документации this вы должны иметь возможность получить параметры, подписавшись на параметры, но в моем случае кажется, что это не работает.

Что я хочу достичь, так это получить params в моем родительском компоненте FROM дочерних маршрутов.

Для примера скажем, что это мои маршруты:

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

Я хочу, чтобы получить параметр id и использовать его в моем ParentComponent. Так что я пытаюсь так:

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

    } 

} 

Как это я получаю:

Неопределенное

Что я здесь отсутствует?

Answer 1

У ActivatedRoute есть получатели для доступа к его информации о родительском/детском маршруте.

Для того, чтобы получить доступ к первому ребенку маршрут от родителей, вы должны использовать:

this.route.firstChild.params

Если вы хотите, чтобы все дочерние маршруты, которые вы могли бы использовать в children собственность. Это возвращает массив ActivatedRoute

this.route.children

Если бы вы были ребенком маршрута и необходимых параметров от родителя:

this.route.parent.params

Answer 2

Ребенок параметры связаны/сохраняются с ребенком ActivatedRoute. Они недоступны в родительском ActivatedRoute. Таким образом, вам сначала нужно получить ActivatedRoute ребенка, используя getter firstChild или children.

Затем родитель может либо подписаться на изменения параметров ребенка:

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

или он может получить снимок параметров ребенка:

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

Если вы хотите, чтобы получить все дети (например, если у вас несколько торговых точек), используйте ActivatedRoute.children или ActivatedRouteSnapshot.children, чтобы получить массив дочерних активированных ролей или дочерних активированных RouteSapshots.

Answer 3

this.activatedRoute.snapshot.firstChild.params