Frage Abonniere route params und queryParams in Angular 2


Ich habe folgendes eingerichtet Routing-System

export const MyRoutes: Routes = [
    {path: '', redirectTo: 'new', pathMatch: 'full'},
    {path: ':type', component: MyComponent}
];

und habe folgendes Navigationssystem

goToPage('new');
goToPageNo('new', 2);

goToPage(type) {
    this.router.navigate([type]);
}
goToPageNo(type, pageNo) {
    this.router.navigate([type], {queryParams: {page: pageNo}});
}

Probe URL sieht aus wie das

http: // localhost: 3000 / neu

http: // localhost: 3000 / neu? Seite = 2

http: // localhost: 3000 / aktualisiert

http: // localhost: 3000 / aktualisiert? Seite = 5

Manchmal haben sie wahlweise queryParams (Seite)

Jetzt muss ich beide lesen Route Params und QueryParams

ngOnInit(): void {
    this.paramsSubscription = this.route.params.subscribe((param: any) => {
        this.type = param['type'];
        this.querySubscription = this.route.queryParams.subscribe((queryParam: any) => {
            this.page = queryParam['page'];
            if (this.page)
                this.goToPageNo(this.type, this.page);
            else
                this.goToPage(this.type);
        });
    });
}

ngOnDestroy(): void {
    this.paramsSubscription.unsubscribe();
    this.querySubscription.unsubscribe();
}

Nun funktioniert das nicht wie erwartet, das Besuchen von Seiten ohne queryParams funktioniert, dann besuche ich eine Seite mit queryParams "goToPageNo" wird mehrfach aufgerufen, da ich queryParams innerhalb von Route Params abonniere.

Ich habe mir die Angular 2-Dokumentation angeschaut, sie haben kein Beispiel oder Codes, wo ein Abonnement für Sowohl Route Params als auch QueryParams wird zur gleichen Zeit implementiert.

Irgendeine Möglichkeit, das richtig zu machen? Irgendwelche Vorschläge?


12
2017-11-19 23:56


Ursprung


Antworten:


Ich habe es geschafft, eine einzige Subskription für die Parameter queryParams und Params zu erhalten, indem ich die Observablen mit Hilfe von Observable.combineLatest vor dem Abonnieren.

Z.B.

var obsComb = Observable.combineLatest(this.route.params, this.route.queryParams, 
  (params, qparams) => ({ params, qparams }));

obsComb.subscribe( ap => {
  console.log(ap.params['type']);
  console.log(ap.qparams['page']);
});

29
2017-11-30 23:42



Späte Antwort, aber eine andere Lösung: Anstatt params und queryparams zu abonnieren, abonniere ich das NavigationEnd-Ereignis auf dem Router. Feuert nur einmal ab und sowohl params als auch queryparams sind auf Snapshot verfügbar: (Beispiel für eckige 4)

this.router.events.filter(event=>event instanceof NavigationEnd)
   .subscribe(event=>{
       let yourparameter = this.activatedroute.snapshot.params.yourparameter;
       let yourqueryparameter = this.activatedroute.snapshot.queryparams.yourqueryparameter;
   });

Bezüglich der Abmeldung: Ja es ist wahr routing params, queryparams oder navigation events subscribtions werden automatisch vom Router abgemeldet, es gibt jedoch eine Ausnahme: Wenn Ihre Route untergeordnete Elemente aufweist, wird bei der Navigation zwischen untergeordneten Elementen kein Abmelden durchgeführt. Nur wenn Sie von der übergeordneten Route weg navigieren!

Z.B. Ich hatte eine Situation mit Tabs als Kind Routen. Im Konstruktor der ersten Tab-Komponente, die auf Route-Params abonniert, um Daten abzurufen. Jedes Mal, wenn ich von der ersten zur zweiten Registerkarte und zurück navigiere, wurde eine weitere Subskription hinzugefügt, was dazu führte, dass die Anzahl der Anfragen multipliziert wurde.


4
2017-08-18 21:15



Benutzen ActivatedRouteSnapshot von deiner ActivatedRoute

ActivatedRouteSnapshot Schnittstelle hat params und queryParams Eigenschaft, und Sie könnten beide Werte gleichzeitig erhalten.

constructor(private route: ActivatedRoute) {
    console.log(this.route.snapshot.params);
    console.log(this.route.snapshot.queryParams);
}

Edit: Wie bereits erwähnt, erhalten wir mit dieser Technik nur den Anfangswert der Parameter.

Beispiel Plunker


1
2017-11-20 03:00