Przekazywanie opcjonalnych parametrów
Parametry zapytania umożliwiają przekazywanie parametrów opcjonalnych do trasy, takich jak informacje o paginacji.
Na przykład na trasie z listą stronicowanych adres URL może wyglądać następująco, aby wskazać, że załadowaliśmy drugą stronę:
localhost: 3000/lista produktów? strona = 2
Kluczową różnicą między parametrami zapytania i parametrami trasy jest to, że parametry trasy są niezbędne do określenia trasy, podczas gdy parametry zapytania są opcjonalne.
Przekazywanie parametrów zapytania
Użyj dyrektywy [queryParams]
wraz z [routerLink]
, aby przekazać parametry zapytania. Na przykład:
<a [routerLink]="['product-list']" [queryParams]="{ page: 99 }">Go to Page 99</a>
Alternatywnie możemy nawigować programowo za pomocą usługi Router
:
goToPage(pageNum) {
this.router.navigate(['/product-list'], { queryParams: { page: pageNum } });
}
Czytanie parametrów zapytań
Podobnie jak przy odczytaniu parametrów trasy, usługa Router
zwraca Observable, które możemy zasubskrybować, aby odczytać parametry zapytania:
import { Component } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'product-list',
template: `<!-- Show product list -->`
})
export default class ProductList {
constructor(
private route: ActivatedRoute,
private router: Router) {}
ngOnInit() {
this.sub = this.route
.queryParams
.subscribe(params => {
// Defaults to 0 if no query param provided.
this.page = +params['page'] || 0;
});
}
ngOnDestroy() {
this.sub.unsubscribe();
}
nextPage() {
this.router.navigate(['product-list'], { queryParams: { page: this.page + 1 } });
}
}
Zobacz przykład [054]
Zobacz Oficjalną dokumentację dotyczącą parametrów zapytania