Różne trasy tego samego komponentu

Question

Chcę osiągnąć coś takiego /products pokazuje wszystkie produkty i /products/:category pokazuje wszystkie produkty związane z określoną kategorią. Aby to osiągnąć muszę następujących trasach:

const productsRoutes: Routes = [ 
    { 
    path: 'products', 
    component: ProductsComponent, 
    children: [ 
     { 
     path: '', 
     component: ProductsListComponent, 
     }, 
     { 
     path: ':category', 
     component: ProductsListComponent 
     } 
    ] 
    } 
]; 

Problem

Kiedy przełączyć pomiędzy kategoriami, wszystko jest w porządku, kiedy przełączać się między wszystkich produktów i kategorii produktów i vice versa, kątowe Przerysowuje elementy i jest migotanie.

Ostateczna wersja Angular 2 Router nie ma Regexa, o ile wiem. Czy jest coś, czego mi brakuje, czy na razie to jedyne rozwiązanie?

Answer 1

Nie wiem, czy istnieje inny sposób, aby to zrobić, ale udało mi się sprawić, by działał przy użyciu następującego hacka.

export const productsRoutes: Route[] = [ 
    { 
     path: 'products', 
     component: ProductsComponent, 
     children: [ 
      { 
       path: '', 
       pathMatch: 'prefix', 
       component: ProductsListComponent, 
       children: [ 
        { 
         path: '', 
         component: EmptyComponent, 
        }, 
        { 
         path: ':category', 
         component: EmptyComponent, 
        }, 
       ], 
      }, 
     ], 
    }, 
]; 

EmptyComponent:

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'GemainEmpty', 
    template: '<router-outlet></router-outlet>', 
}) 
export class EmptyComponent { 
} 

zmiany tras Uchwyt na ListComponent:

ngOnInit() { 
    this.routerEventsSubscription = this.router.events.subscribe((evt) => { 
     if (!(evt instanceof NavigationEnd)) { 
      return; 
     } 
     //Code to reload/filter list 
    } 
} 

i dodać wylot routera na szablonie ListComponent.

Answer 2

Można także zdefiniować przekierowanie do konkretnej ścieżki:

{ path: '**', redirectTo: '/home', pathMatch: 'full' }, 

gdzie /home jest trasa chcesz przekierować do.

path: '**' rozwiązuje wszystkie ścieżki, które nie są zdefiniowane

Answer 3

można go rozwiązać przez dodawanie tras

const routes: Routes = [ 
    { path: 'experience', 
     children: [ 
      { path: 'pending', component: ExperienceComponent }, 
      { path: 'requests', component: ExperienceComponent }, 
     ] }] 

iw ExperienceComponent importu

import { ActivatedRoute } from "@angular/router"; 

i konstruktora dodać ten parametr

constructor(public route: ActivatedRoute) 

i wewnątrz konstruktora Zobacz URL

this.route.url.subscribe(params => { 
    console.log(params[0].path); 
})