Angulaire 2: prise en RouteParams du composant parent

Vous ne devriez pas essayer d'utiliser RouteParams dans votre ChildOneComponent.

Utilisation RouteRegistry, la place!

@Component({
  ...
})

export class ChildOneComponent {

  public username: string;

  constructor(registry: RouteRegistry, location: Location) {
    route_registry.recognize(location.path(), []).then((instruction) => {
      console.log(instruction.component.params['username']);
    })
  }


  ...
}

Mise à JOUR: à partir de ce pull request (angulaire de la bêta.9): https://github.com/angular/angular/pull/7163

Vous pouvez maintenant avoir accès à l'instruction sans recognize(location.path(), []).

Exemple:

@Component({
  ...
})

export class ChildOneComponent {

  public username: string;

  constructor(_router: Router) {
    let instruction = _router.currentInstruction();
    this.username = instruction.component.params['username'];
  }

  ...
}

Je n'ai pas essayé, mais

Plus de détails ici:

https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta9-2016-03-09
https://angular.io/docs/ts/latest/api/router/Router-class.html

Mise à JOUR 2:
Un petit changement angulaire de la version 2.0.0.beta15:

Maintenant currentInstruction n'est pas une fonction plus. En outre, vous devez charger la root routeur. (merci à @Lxrd-AJ pour le reporting)

@Component({
  ...
})

export class ChildOneComponent {

  public username: string;

  constructor(_router: Router) {
    let instruction = _router.root.currentInstruction;
    this.username = instruction.component.params['username'];
  }

  ...
}

OriginalL'auteur ProGM

Je l'ai trouvé moche mais la solution de travail, en demandant à la mère (précisément le 2ème ancêtre) de l'injecteur, et par l'obtention de l' RouteParams à partir d'ici.

Quelque chose comme

@Component({
  ...
})
export class ChildOneComponent {
  public username: string;

  constructor(injector: Injector) {
    let params = injector.parent.parent.get(RouteParams);

    this.username = params.get('username');
  }
}

OriginalL'auteur Yohan G.

Vous pouvez prendre composant de parent de l'itinéraire à l'intérieur du composant enfant à partir de l'injecteur et puis obtenir tout de composant enfant. Dans votre cas, comme ce

@Component({
  ...
})

export class ChildOneComponent {

  public username: string;

  constructor(
    public params: RouteParams
    private _injector: Injector

  ) {
    var parentComponent = this._injector.get(ParentComponent)

    this.username = parentComponent.username;
    //or
    this.username = parentComponent.params.get('username');
  }

  ...
}

OriginalL'auteur Danxil

Dans RC6, routeur 3.0.0-rc.2 (fonctionne probablement en RC5), vous pouvez prendre la route params à partir de l'URL d'un instantané dans le cas où les paramètres ne changent pas, sans observables avec cette seule ligne:

this.route.snapshot.parent.params['username'];

N'oubliez pas d'injecter ActivatedRoute comme suit:

constructor(private route: ActivatedRoute) {};

OriginalL'auteur mrgoos

J'ai fini par écrire ce genre de hack Angulaire 2 rc.1

import { Router } from '@angular/router-deprecated';
import * as _ from 'lodash';

interface ParameterObject {
  [key: string]: any[];
};

/**
 * Traverse route.parent links until root router and check each level
 * currentInstruction and group parameters to single object.
 *
 * e.g.
 * {
 *   id: [314, 593],
 *   otherParam: [9]
 * }
 */
export default function mergeRouteParams(router: Router): ParameterObject {
  let mergedParameters: ParameterObject = {};
  while (router) {
    let currentInstruction = router.currentInstruction;
    if (currentInstruction) {
      let currentParams = currentInstruction.component.params;
      _.each(currentParams, (value, key) => {
        let valuesForKey = mergedParameters[key] || [];
        valuesForKey.unshift(value);
        mergedParameters[key] = valuesForKey;
      });
    }
    router = router.parent;
  }
  return mergedParameters;
}

Maintenant en vue, je collecte les paramètres en vue au lieu de lire RouteParams je viens de les obtenir par le biais de routeur:

@Component({
  ...
})

export class ChildishComponent {

  constructor(router: Router) {
    let allParams = mergeRouteParams(router);
    let parentRouteId = allParams['id'][0];
    let childRouteId = allParams['id'][1];
    let otherRandomParam = allParams.otherRandomParam[0];
  }

  ...
}  

OriginalL'auteur Mikael Lepistö

Vous pouvez le faire sur le cliché avec le suivant, mais si elle change, votre id la propriété ne seront pas mis à jour.

Cet exemple montre également comment vous pouvez vous abonner à tous ancêtre des changements de paramètres et de regarder pour la personne que vous êtes intéressé par la fusion de tous les paramètre observables. Cependant, soyez prudent avec cette méthode, car il pourrait y avoir plusieurs ancêtres qui ont le même paramètre clé/nom.

import { Component } from '@angular/core';
import { ActivatedRoute, Params, ActivatedRouteSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/observable/merge';
//This traverses the route, following ancestors, looking for the parameter.
function getParam(route: ActivatedRouteSnapshot, key: string): any {
if (route != null) {
let param = route.params[key];
if (param === undefined) {
return getParam(route.parent, key);
} else {
return param;
}
} else {
return undefined;
}
}
@Component({ /* ... */ })
export class SomeChildComponent {
id: string;
private _parameterSubscription: Subscription;
constructor(private route: ActivatedRoute) {
}
ngOnInit() {
//There is no need to do this if you subscribe to parameter changes like below.
this.id = getParam(this.route.snapshot, 'id');
let paramObservables: Observable<Params>[] =
this.route.pathFromRoot.map(route => route.params);
this._parametersSubscription =
Observable.merge(...paramObservables).subscribe((params: Params) => {
if ('id' in params) {
//If there are ancestor routes that have used
//the same parameter name, they will conflict!
this.id = params['id'];
}
});
}
ngOnDestroy() {
this._parameterSubscription.unsubscribe();
}
}

OriginalL'auteur shattar