Winkel 2: Abrufen von RouteParams von der übergeordneten Komponente

Wie erhalte ich die RouteParams von einer übergeordneten Komponente?

App.ts::

@Component({
  ...
})

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

export class HomeComponent {
  ...
}

Und dann ParentComponentkann ich in der einfach meinen Benutzernamen param abrufen und die untergeordneten Routen festlegen.

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

  ...
}

Aber wie kann ich dann denselben Parameter 'Benutzername' in diesen untergeordneten Komponenten erhalten? Den gleichen Trick wie oben zu machen, macht es nicht. Weil diese Parameter in der ProfileComponent definiert sind oder so?

@Component({
  ...
})

export class ChildOneComponent {

  public username: string;

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

  ...
}

AKTUALISIEREN:

Nachdem das Angular2-Finale offiziell veröffentlicht wurde, ist der richtige Weg, dies zu tun:

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:

So habe ich es mit dem Paket "@ angle / router" gemacht: "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();
    }
}

In diesem Beispiel hat die Route das folgende Format: / parent /: id / child /: childid

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

Sie sollten nicht versuchen, RouteParamsin Ihrem zu verwenden ChildOneComponent.

Verwenden Sie RouteRegistrystattdessen!

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


  ...
}

UPDATE: Ab dieser Pull-Anfrage (Angular Beta.9): https://github.com/angular/angular/pull/7163

Sie können jetzt ohne auf die aktuelle Anweisung zugreifen recognize(location.path(), []).

Beispiel:

@Component({
  ...
})

export class ChildOneComponent {

  public username: string;

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

  ...
}

Ich habe es noch nicht versucht

Weitere Details hier:

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

UPDATE 2: Eine kleine Änderung gegenüber Winkel 2.0.0.beta15:

Jetzt currentInstructionist keine Funktion mehr. Außerdem müssen Sie den rootRouter laden . (Danke an @ Lxrd-AJ für die Berichterstattung)

@Component({
  ...
})

export class ChildOneComponent {

  public username: string;

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

  ...
}

Wie von Günter Zöchbauer erwähnt, habe ich den Kommentar unter https://github.com/angular/angular/issues/6204#issuecomment-173273143 verwendet , um mein Problem anzugehen. Ich habe die InjectorKlasse von verwendet angular2/core, um die Routeparams des übergeordneten Elements abzurufen. Es stellt sich heraus, dass Winkel 2 keine tief verschachtelten Routen verarbeitet. Vielleicht werden sie das in Zukunft hinzufügen.

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

Ich fand eine hässliche, aber funktionierende Lösung, indem ich den Injektor des Elternteils (genau des 2. Vorfahren) anforderte und den RouteParamsvon hier bekam.

Etwas wie

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

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

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

RC5 + @ angle / router ":" 3.0.0-rc.1 LÖSUNG: Es scheint, dass this.router.routerState.queryParamsdies veraltet ist. Sie können die übergeordneten Routenparameter folgendermaßen abrufen:

constructor(private activatedRoute: ActivatedRoute) {
}    

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

Sie können die Komponente der übergeordneten Route innerhalb der untergeordneten Komponente vom Injektor übernehmen und dann eine beliebige Komponente von der untergeordneten Komponente abrufen. In deinem Fall so

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

  ...
}

Das Übergeben der Injector-Instanz an den Konstruktor in der untergeordneten Komponente ist möglicherweise nicht sinnvoll, wenn Sie Komponententests für Ihren Code schreiben möchten.

Der einfachste Weg, dies zu umgehen, besteht darin, eine Serviceklasse in der übergeordneten Komponente zu haben, in der Sie Ihre erforderlichen Parameter speichern.

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

Dann injizieren Sie einfach den gleichen Dienst in untergeordnete Komponenten und greifen auf die Parameter zu.

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

Beachten Sie, dass Sie diesen Service auf Ihre übergeordnete Komponente und ihre untergeordneten Komponenten anwenden sollten, indem Sie "Provider" im übergeordneten Komponentendekorator verwenden.

Ich empfehle diesen Artikel über DI und Bereiche in Angular 2: http://blog.ehowtram.io/angular/2015/08/20/host-and-visibility-in-angular-2-dependency-injection.html

In RC6, Router 3.0.0-rc.2 (funktioniert wahrscheinlich auch in RC5), können Sie Routenparameter aus der URL als Momentaufnahme verwenden, falls sich die Parameter nicht ändern, ohne Observables mit diesem einen Liner:

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

Vergessen Sie nicht, ActivatedRoute wie folgt zu injizieren:

constructor(private route: ActivatedRoute) {};

Mit RxJS Observable.combineLatestkönnen wir dem Umgang mit idiomatischen Parametern etwas nahe kommen:

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

Am Ende habe ich diese Art von Hack für Angular 2 rc.1 geschrieben

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

Jetzt in der Ansicht sammle ich Parameter in der Ansicht, anstatt zu lesen, RouteParamsich erhalte sie nur über den Router:

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

  ...
}  

In FINAL können Sie mit wenig Hilfe von RXJS beide Karten (von Kind und Eltern) kombinieren:

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

Andere Fragen, die man haben könnte:

• Ist es wirklich eine gute Idee, oben zu verwenden - wegen der Kopplung (untergeordnete Komponente mit den Parametern der Eltern koppeln - nicht auf API-Ebene - versteckte Kopplung),
• Ist es ein angemessener Ansatz in Bezug auf RXJS (es würde Hardcore-Feedback von RXJS-Benutzern erfordern;)

Sie können dies für den Snapshot wie folgt tun. Wenn sich dies jedoch ändert, wird Ihre idEigenschaft nicht aktualisiert.

Dieses Beispiel zeigt auch, wie Sie alle Änderungen der Vorfahrenparameter abonnieren und nach der gewünschten suchen können, indem Sie alle Parameter-Observablen zusammenführen. Seien Sie jedoch vorsichtig mit dieser Methode, da es mehrere Vorfahren geben kann, die denselben Parameterschlüssel / Namen haben.

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

Abrufen von RouteParams von der übergeordneten Komponente in Angular 8 -

Ich habe eine Route http: // localhost: 4200 / partner / student-profile / 1234 / info

Elternroute - Schülerprofil

Param - 1234 (student_id)

Kinderroute - Info

Zugriff auf Parameter in der untergeordneten Route (Info) -

Importieren

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

Konstrukteur

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

Zugriff auf übergeordnete Routenparameter

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

Jetzt hat unsere Variable studentId den Parameterwert.