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 ParentComponent
kann 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
}
...
}
angular
angular2-routing
Aico Klein Ovink
quelle
quelle
<child-one-component [username]="username"> ...
<routerlink [username]="username">...
? Und ist das der richtige Weg dann @MarkRajcok?<a [router-link]="[ './....', {username: username} ]
funktionieren wird. Entschuldigung, ich habe keine Ahnung, ob das funktionieren wird oder nicht. (Ich habe noch nicht viel mit Routing gespielt.)<router-outlet></router-outlet>
, sollte ich eine Eingabe dazu machen. Weil dieAntworten:
AKTUALISIEREN:
Nachdem das Angular2-Finale offiziell veröffentlicht wurde, ist der richtige Weg, dies zu tun:
ORIGINAL:
So habe ich es mit dem Paket "@ angle / router" gemacht: "3.0.0-alpha.6":
In diesem Beispiel hat die Route das folgende Format: / parent /: id / child /: childid
quelle
parent
1 Mal durchlaufen müssen . Siehe stackoverflow.com/a/48511516/4185989 Es lohnt sich jedoch, dassubscribe
/unsubscribe
-Muster aus dieser Antwort zu berücksichtigen .this.activatedRoute.parent.snapshot.params.someParam
Sie sollten nicht versuchen,
RouteParams
in Ihrem zu verwendenChildOneComponent
.Verwenden Sie
RouteRegistry
stattdessen!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:
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
currentInstruction
ist keine Funktion mehr. Außerdem müssen Sie denroot
Router laden . (Danke an @ Lxrd-AJ für die Berichterstattung)quelle
_router.root.currentInstruction.component.params['id']
. Der Schwerpunkt liegt auf root, da Sie jetzt die aktuelle Anweisung vom Root-Router erhalten und nicht_router
. PS: Ich benutzeangular2.0.0-beta.15
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
Injector
Klasse von verwendetangular2/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.quelle
Ich fand eine hässliche, aber funktionierende Lösung, indem ich den Injektor des Elternteils (genau des 2. Vorfahren) anforderte und den
RouteParams
von hier bekam.Etwas wie
quelle
RC5 + @ angle / router ":" 3.0.0-rc.1 LÖSUNG: Es scheint, dass
this.router.routerState.queryParams
dies veraltet ist. Sie können die übergeordneten Routenparameter folgendermaßen abrufen:quelle
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
quelle
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.
Dann injizieren Sie einfach den gleichen Dienst in untergeordnete Komponenten und greifen auf die Parameter zu.
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
quelle
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) {};
quelle
Mit RxJS
Observable.combineLatest
kö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']; }); } }
quelle
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,
RouteParams
ich 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]; } ... }
quelle
MergedRouteParams
Klasse privat gemacht , die dieget
Methode der Standardklasse implementiertRouteParams
(zweiter Parameter ist index, standardmäßig null).In FINAL können Sie mit wenig Hilfe von RXJS beide Karten (von Kind und Eltern) kombinieren:
Andere Fragen, die man haben könnte:
quelle
Sie können dies für den Snapshot wie folgt tun. Wenn sich dies jedoch ändert, wird Ihre
id
Eigenschaft 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(); } }
quelle
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
Konstrukteur
Zugriff auf übergeordnete Routenparameter
Jetzt hat unsere Variable studentId den Parameterwert.
quelle