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