Używanie parametrów trasy

Załóżmy, że tworzymy aplikację wyświetlającą listę produktów. Gdy użytkownik kliknie produkt na liście, chcemy wyświetlić stronę zawierającą szczegółowe informacje o tym produkcie. Aby to zrobić, musisz:

• dodać parametr - identyfikator do trasy
• powiązać trasę z parametrem
• dodać usługę, która odczytuje parametr.

Deklaracja parametrów trasy

Trasa dla komponentu wyświetlającego szczegóły konkretnego produktu wymaga parametru trasy w postaci identyfikatora tego produktu. Możemy to zaimplementować za pomocą następujących Routes:

export const routes: Routes = [
  { path: '', redirectTo: 'product-list', pathMatch: 'full' },
  { path: 'product-list', component: ProductList },
  { path: 'product-details/:id', component: ProductDetails }
];

Zwróć uwagę na :id na ścieżceproduct-details, która umieszcza parametr w ścieżce. Aby na przykład wyświetlić stronę szczegółów produktu dla produktu o identyfikatorze 5, musisz użyć następującego adresu URL:
localhost:4200/szczegóły produktu/5

Powiązanie tras z parametrami

W komponencie ProductList możesz wyświetlić listę produktów. Każdy produkt ma link do trasy product-details, z identyfikatorem produktu jako parametr:

<a *ngFor="let product of products"
  [routerLink]="['/product-details', product.id]">
  {{ product.name }}
</a>

Zwróć uwagę, że dyrektywa routerLink przekazuje tablicę, która określa ścieżkę i parametr trasy. Alternatywnie mogliśmy programowo nawigować do trasy:

goToProductDetails(id) {
  this.router.navigate(['/product-details', id]);
}

Odczytywanie parametrów trasy

Składnik ProductDetails musi odczytać parametr, a następnie załadować produkt na podstawie identyfikatora podanego w parametrze.

Usługa ActivatedRoute udostępnia Observable parametry, które możemy zasubskrybować, aby uzyskać parametry trasy (patrz Observables).

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'product-details',
  template: `
    <div>
      Showing product details for product: {{id}}
    </div>
  `,
})
export class LoanDetailsPage implements OnInit, OnDestroy {
  id: number;
  private sub: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       this.id = +params['id']; // (+) converts string 'id' to a number

       // In a real app: dispatch action to load the details here.
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

Powodem, dla którego właściwość params wActivatedRoute jest obserwowalna, jest to że router nie może odtworzyć komponentu podczas nawigacji do tego samego komponentu. W takim przypadku parametr może ulec zmianie bez odtwarzania komponentu.

Zobacz podstawowy przykład [047]

Zobacz przykład z programową nawigacją po trasie [048]

Wyświetl przykłady działające w trybie pełnoekranowym, aby zobaczyć zmiany trasy w adresie URL.