Angular 2 nouveau routeur: Comment obtenir les paramètres du routeur d'un composant enfant?

Dans la dernière version de @angular/router 3.0.0-rc.1 La façon dont vous obtenez les paramètres à partir d'une URL/route a changé.

Basé sur cette de la documentation, vous devriez être en mesure d'obtenir les paramètres en vous abonnant à la params mais dans mon cas, il semble que n'est pas de travail.

Ce que je veux réaliser est d'obtenir params dans mon composant parent DE l'enfant routes.

Par exemple, disons que c'est mon parcours:

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

Je veux obtenir le id paramètre et l'utiliser dans mon ParentComponent.
Donc j'essaye comme ceci:

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

  }

}

Comme cela, je suis arriver:

Undefined

Ce qui me manque ici?

source d'informationauteur Vassilis Pits

  1. 18

    La ActivatedRoute a getters pour accéder à ses parent/enfant informations sur l'itinéraire.

    Afin d'accéder à la première enfant de route à partir de la parent, vous pouvez utiliser:

    this.route.firstChild.params

    Si vous voulait que tous les enfants itinéraires vous utilisez le children de la propriété. Cette fonction retourne un tableau de ActivatedRoute

    this.route.children

    Si vous étiez dans un enfant d'itinéraire et des paramètres nécessaires de la part du parent:

    this.route.parent.params

  2. 5

    L'enfant paramètres sont associés/stocké avec l'enfant ActivatedRoute. Ils ne sont pas disponibles sur le parent du ActivatedRoute. Donc, vous devez d'abord obtenir l'enfant ActivatedRoute à l'aide de getter firstChild ou children.

    Ensuite, le parent peut s'abonner à l'enfant des changements de paramètres:

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

    ou elle peut obtenir un instantané de l'enfant paramètres:

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

    Si vous voulez obtenir tous les enfants (par exemple, si vous avez plusieurs points de vente), l'utilisation ActivatedRoute.children ou ActivatedRouteSnapshot.children pour obtenir un tableau d'enfant ActivatedRoutes ou de l'enfant ActivatedRouteShapshots.

  3. 0

    En utilisant this.activatedRoute.snapshot.firstChild.params