Angular 2: obtener RouteParams del componente principal

¿Cómo obtengo los RouteParams de un componente principal?

App.ts:

@Component({
  ...
})

@RouteConfig([
  {path: '/', component: HomeComponent, as: 'Home'},
  {path: '/:username/...', component: ParentComponent, as: 'Parent'}
])

export class HomeComponent {
  ...
}

Y luego, en el ParentComponent, puedo obtener fácilmente mi parámetro de nombre de usuario y configurar las rutas secundarias.

Parent.ts:

@Component({
  ...
})

@RouteConfig([
  { path: '/child-1', component: ChildOneComponent, as: 'ChildOne' },
  { path: '/child-2', component: ChildTwoComponent, as: 'ChildTwo' }
])

export class ParentComponent {

  public username: string;

  constructor(
    public params: RouteParams
  ) {
    this.username = params.get('username');
  }

  ...
}

Pero entonces, ¿cómo puedo obtener este mismo parámetro de 'nombre de usuario' en esos componentes secundarios? Hacer el mismo truco anterior, no lo hace. ¿Porque esos parámetros están definidos en ProfileComponent o algo así?

@Component({
  ...
})

export class ChildOneComponent {

  public username: string;

  constructor(
    public params: RouteParams
  ) {
    this.username = params.get('username');
    // returns null
  }

  ...
}

ACTUALIZAR:

Ahora que Angular2 final se lanzó oficialmente, la forma correcta de hacerlo es la siguiente:

export class ChildComponent {

    private sub: any;

    private parentRouteId: number;

    constructor(private route: ActivatedRoute) { }

    ngOnInit() {
        this.sub = this.route.parent.params.subscribe(params => {
            this.parentRouteId = +params["id"];
        });
    }

    ngOnDestroy() {
        this.sub.unsubscribe();
    }
}

ORIGINAL:

Así es como lo hice usando el paquete "@ angular / router": "3.0.0-alpha.6":

export class ChildComponent {

    private sub: any;

    private parentRouteId: number;

    constructor(
        private router: Router,
        private route: ActivatedRoute) {
    }

    ngOnInit() {
        this.sub = this.router.routerState.parent(this.route).params.subscribe(params => {
            this.parentRouteId = +params["id"];
        });
    }

    ngOnDestroy() {
        this.sub.unsubscribe();
    }
}

En este ejemplo, la ruta tiene el siguiente formato: / parent /: id / child /: childid

export const routes: RouterConfig = [
    {
        path: '/parent/:id',
        component: ParentComponent,
        children: [
            { path: '/child/:childid', component: ChildComponent }]
    }
];

No debe intentar usar RouteParamsen su ChildOneComponent.

¡Úsalo en su RouteRegistrylugar!

@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']);
    })
  }


  ...
}

ACTUALIZACIÓN: A partir de esta solicitud de extracción (angular beta.9): https://github.com/angular/angular/pull/7163

Ahora puede acceder a la instrucción actual sin recognize(location.path(), []).

Ejemplo:

@Component({
  ...
})

export class ChildOneComponent {

  public username: string;

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

  ...
}

Aún no lo he probado

Más detalles aquí:

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

ACTUALIZACIÓN 2: Un pequeño cambio a partir de angular 2.0.0.beta15:

Ahora currentInstructionya no es una función. Además, debes cargar el rootenrutador. (gracias a @ Lxrd-AJ por informar)

@Component({
  ...
})

export class ChildOneComponent {

  public username: string;

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

  ...
}

Como lo mencionó Günter Zöchbauer, utilicé el comentario en https://github.com/angular/angular/issues/6204#issuecomment-173273143 para abordar mi problema. Usé la Injectorclase de angular2/corepara recuperar los parámetros de ruta del padre. Resulta que angular 2 no maneja rutas profundamente anidadas. Tal vez agreguen eso en el futuro.

constructor(private _issueService: IssueService,
            private _injector: Injector) {}

getIssues() {
    let id = this._injector.parent.parent.get(RouteParams).get('id');
    this._issueService.getIssues(id).then(issues => this.issues = issues);
}

Encontré una solución fea pero funcional, solicitando el inyector principal (precisamente el segundo ancestro) y obteniendo el RouteParamsde aquí.

Algo como

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

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

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

RC5 + @ angular / enrutador ":" 3.0.0-rc.1 SOLUCIÓN: Parece que this.router.routerState.queryParamsha quedado en desuso. Puede obtener los parámetros de la ruta principal de esta manera:

constructor(private activatedRoute: ActivatedRoute) {
}    

this.activatedRoute.parent.params.subscribe(
  (param: any) => {
    let userId = param['userId'];
    console.log(userId);
  });

Puede tomar el componente de la ruta principal dentro del componente secundario del inyector y luego obtener cualquiera del componente secundario. En tu caso como este

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

  ...
}

Pasar la instancia del inyector al constructor en el componente hijo puede no ser bueno si desea escribir pruebas unitarias para su código.

La forma más fácil de evitar esto es tener una clase de servicio en el componente principal, en la que guarda los parámetros necesarios.

@Component({
    template: `<div><router-outlet></router-outlet></div>`,
    directives: [RouterOutlet],
    providers: [SomeServiceClass]
})
@RouteConfig([
    {path: "/", name: "IssueList", component: IssueListComponent, useAsDefault: true}
])
class IssueMountComponent {
    constructor(routeParams: RouteParams, someService: SomeServiceClass) {
        someService.id = routeParams.get('id');
    }
}

Luego, simplemente inyecta el mismo servicio a los componentes secundarios y accede a los parámetros.

@Component({
    template: `some template here`
})
class IssueListComponent implements OnInit {
    issues: Issue[];
    constructor(private someService: SomeServiceClass) {}

    getIssues() {
        let id = this.someService.id;
        // do your magic here
    }

    ngOnInit() {
        this.getIssues();
    }
}

Tenga en cuenta que debe limitar dicho servicio a su componente principal y sus componentes secundarios utilizando "proveedores" en el decorador de componentes principales.

Recomiendo este artículo sobre DI y alcances en Angular 2: http://blog.ilsttram.io/angular/2015/08/20/host-and-visibility-in-angular-2-dependency-injection.html

En RC6, enrutador 3.0.0-rc.2 (probablemente también funcione en RC5), puede tomar los parámetros de ruta de la URL como una instantánea en caso de que los parámetros no cambien, sin observables con este trazador de líneas:

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

No olvide inyectar ActivatedRoute de la siguiente manera:

constructor(private route: ActivatedRoute) {};

Con RxJS Observable.combineLatest, podemos obtener algo parecido al manejo de parámetros idiomáticos:

import 'rxjs/add/operator/combineLatest';

import {Component} from '@angular/core';
import {ActivatedRoute, Params} from '@angular/router';
import {Observable} from 'rxjs/Observable';

@Component({ /* ... */ })
export class SomeChildComponent {
  email: string;
  id: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    Observable.combineLatest(this.route.params, this.route.parent.params)
        .forEach((params: Params[]) => {
          this.id = params[0]['id'];
          this.email = params[1]['email'];
        });
  }
}

Terminé escribiendo este tipo de truco para Angular 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;
}

Ahora, a la vista, recopilo los parámetros a la vista en lugar de leerlos RouteParams, solo los obtengo a través del enrutador:

@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];
  }

  ...
}  

En FINAL, con poca ayuda de RXJS , puede combinar ambos mapas (del niño y del padre):

(route) => Observable
    .zip(route.params, route.parent.params)
    .map(data => Object.assign({}, data[0], data[1]))

Otras preguntas que uno podría tener:

• ¿Es realmente una buena idea usarlo arriba, debido al acoplamiento (emparejar el componente secundario con los parámetros de los padres, no a nivel de api, acoplamiento oculto),
• ¿Es un enfoque adecuado en términos de RXJS (requeriría comentarios de usuarios incondicionales de RXJS?)

Puede hacerlo en la instantánea con lo siguiente, pero si cambia, su id propiedad no se actualizará.

Este ejemplo también muestra cómo puede suscribirse a todos los cambios de parámetros de antepasados ​​y buscar el que le interesa fusionando todos los parámetros observables. Sin embargo, tenga cuidado con este método porque podría haber varios ancestros que tengan el mismo nombre / clave de parámetro.

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

Obtener RouteParams del componente principal en Angular 8 -

Tengo una ruta http: // localhost: 4200 / partner / student-profile / 1234 / info

Ruta principal - perfil del alumno

Param - 1234 (estudiante_id)

Ruta del niño - info

Accediendo al parámetro en la ruta secundaria (info) -

Importar

import { ActivatedRoute, Router, ParamMap } from '@angular/router';

Constructor

constructor(private activatedRoute: ActivatedRoute, private router: Router) { }

Acceder a los parámetros de la ruta principal

this.activatedRoute.parent.paramMap.subscribe((params: ParamMap) => this.studentId = (params.get('student_id')));

Ahora, nuestra variable studentId tiene el valor param.