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

В последней версии @angular/router 3.0.0-rc.1 Изменены параметры URL-адреса/маршрута.

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

То, что я хочу достичь, - это получить 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);
   });

  }

}

Вроде я получаю:

Undefined

Что мне здесь не хватает?

Ответ 1

ActivatedRoute имеет getters для доступа к своей информации о родительском/детском маршруте.

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

this.route.firstChild.params

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

this.route.children

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

this.route.parent.params

Ответ 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, чтобы получить массив дочерних ActivatedRoutes или дочерних ActivatedRouteSapshots.

Ответ 3

Используя this.activatedRoute.snapshot.firstChild.params