Trasy podrzędne

Gdy niektóre trasy mogą być dostępne i wyświetlane tylko w innych trasach, może być wskazane utworzenie ich jako tras podrzędnych.

Na przykład: strona z informacjami o produkcie może mieć sekcję nawigacyjną z kartami, która domyślnie wyświetla przegląd produktów. Gdy użytkownik kliknie kartę Specyfikacje techniczne, sekcja pokazuje specyfikacje.

Jeśli użytkownik kliknie produkt z identyfikatorem 3, chcemy wyświetlić stronę z informacjami o produkcie z przeglądem:

localhost: 3000/product-details/3/overview

Gdy użytkownik kliknie Dane techniczne:

localhost: 3000/product-details/3/specs

overview ispecs są ścieżkami podrzędnymi product-details/:id. Są dostępne tylko w ramach szczegółów produktu.

Nasze Routes z dziećmi wyglądałyby tak:

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

Gdzie byłyby wyświetlane komponenty dla tych tras podrzędnych? Tak jak mieliśmy <router-outlet></router-outlet> <dla głównego komponentu aplikacji, mielibyśmy gniazdo routera wewnątrz komponentuProductDetails. Komponenty odpowiadające ścieżkom podrzędnym o detalach produktu zostaną umieszczone w gniazdach routera w ProductDetails.

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

@Component({
  selector: 'product-details',
  template: `
    <p>Product Details: {{id}}</p>
    <!-- Product information -->
    <nav>
      <a [routerLink]="['overview']">Overview</a>
      <a [routerLink]="['specs']">Technical Specs</a>
    </nav>
    <router-outlet></router-outlet>
    <!-- Overview & Specs components get added here by the router -->
  `
})
export default class ProductDetails implements OnInit, OnDestroy {
  id: number;

  constructor(private route: ActivatedRoute) {}

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

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

Ewentualnie możemy podać adres URL overview route po prostu jako:

localhost: 3000/szczegóły produktu/3

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

Ponieważ ścieżka podrzędna Overview ścieżkiproduct-details ma pustą ścieżkę, zostanie załadowana domyślnie. Trasa specs pozostaje taka sama.

Wyświetl przykład z trasami podrzędnymi [049]

Zobacz przykład z parametrami trasy i ścieżkami podrzędnymi [050]

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

Dostęp do parametrów trasy rodzica

W powyższym przykładzie powiedz, że ścieżki podrzędne o detalach produktu wymagały identyfikatora produktu, aby pobrać specyfikację lub informacje ogólne. Komponent ścieżki podrzędnej może uzyskać dostęp do parametrów trasy nadrzędnej w następujący sposób:

export default class Overview {
  parentRouteId: number;
  private sub: any;

  constructor(private router: Router,
    private route: ActivatedRoute) {}

  ngOnInit() {
    // Get parent ActivatedRoute of this route.
    this.sub = this.router.routerState.parent(this.route)
      .params.subscribe(params => {
        this.parentRouteId = +params["id"];
      });
  }

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

Wyświetl przykładowe trasy potomne uzyskujące dostęp do parametrów trasy nadrzędnej [051]

Linki

Trasy mogą być poprzedzone / lub ../; to mówi Angularowi, gdzie w drzewie tras do połączenia.

Przykład:

<a [routerLink]="['route-one']">Route One</a>
<a [routerLink]="['../route-two']">Route Two</a>
<a [routerLink]="['/route-three']">Route Three</a>

W powyższym przykładzie łącze do pierwszej trasy łączy się z dzieckiem bieżącej trasy.
Łącze do trasy drugiej łączy się z rodzeństwem obecnej trasy.
Łącze dla trasy 3 łączy się z potomkiem komponentu głównego (tak samo, jak trasa na jeden link, jeśli bieżąca trasa jest komponentiem głównym).