2017-12-26 10 views
0

Angular 5 Anwendung verfügt über einen Datenservice, der Produkte in der angegebenen category zurückgibt und es gibt Paginierung. Kategorie wird in Routen als Parameter angegeben. Paginierung ist und Abfrageparameter. Url sieht so aus: /category?page=2. (Kategorie ist eine Variable)Angular Abonnieren von Route und Route Parameter

Issue: die Komponente sowohl queryParams und paramMap abonniert ist. Wenn nur einer verwendet wird, ist es in Ordnung, aber wenn man von '/ category? Page = 2' nach '/ anotherCategory' triggert, werden beide Daten doppelt gezogen (und abhängig davon, welche beobachtbaren Daten zuerst zurückgegeben werden, führt dies zu unerwünschten Ergebnissen) . Die Verwendung von snapshot funktioniert auch in diesem Fall nicht.

Ich konnte keine Best Practice finden, um dies zu lösen.

@Component({..}} 

constructor(private route: ActivatedRoute) {} 

ngOnInit() { 

    this.route.queryParams.subscribe((params: Params) => { 
     this.currentPage = params['page']; 
     this.getData(this.category, this.currentPage); 
    }); 

    this.route.paramMap.subscribe ((params: Params) => { 
     this.category = params.get('categoryName'); 
     this.getData(this.category, this.currentPage); 
    }); 
} 

Anmerkung: der Code leicht modifiziert wird, und die Einfachheit halben gestrippt.

+0

Was passiert, wenn Sie nur die paramsMap bekommen? – Gary

+0

@Gary, dann habe ich nur die categoryName, nicht die? Page = 2 – Robert

+0

Ah habe deinen Punkt. – Gary

Antwort

0

Ihre Zweifel sind sehr logisch und wir müssen beide Subskriptionen hier verwenden, da Snapshots keine Paramänderungen für dieselbe Route erkennen.

Wir können hier die aktivierte Route in der Funktion getData überprüfen. Wenn also die Parameter zum Ziehen der Daten nicht mit unserer Route übereinstimmen, können wir einfach zurückkehren.

Wir erhalten die Daten nur, wenn beide Parameter mit der aktivierten Route übereinstimmen. Die aktuellen Parameter in der Route können durch einen Snapshot überprüft werden.

Lassen Sie mich wissen, falls eine weitere Klärung erforderlich ist.

Danke