kątowe trasy 2 z konfliktami parametru URL z innymi drogami

Question

moje dziecko trasy modułów są następujące

{ 
    path: '', 
    children: [ 
    { path: '', component: TripManagerComponent }, 
    { path: ':id', component: TripDetailComponent }, 
    { path: 'new', component: TripNewComponent } 
    ] 
} 

ja przechodząc do tych trasach następująco,

navigateToTrip(index: number) { 
    this.router.navigate([index], { relativeTo: this.route }); 
} 

navigateToNewTrip() { 
    this.router.navigate(['new'], { relativeTo: this.route }); 
} 

Ale kątowa wykrywa new trasę jako :id i nawiguje mnie do TripDetailComponent.

Problem polega na tym, że Angular wykrywa "nowy" ciąg jako parametr adresu URL dla trasy :id.

Mogłabym dodać przedrostek do :id, tj. view/:id i sprawić, żeby to zadziałało. Ale muszę zachować wzór adresu URL w obecnej postaci. Czy jest jakiś sposób na zrobienie tego?

My spodziewać wzór url jest

/trips  --> show all trips 
/trips/2334 --> show details of trip 2334 
/trips/new --> show a form to create a new trip 

Answer 1

Obecnie użytkownik prowadzi :id tras z numerem new, a router nie szuka dalszych pasujących tras.

Zamówienie jest istotne. Przenieś trasę new przed trasą :id, a następnie new dopasowuje trasę przed trasą :id.

{ 
    path: '', 
    children: [ 
    { path: '', component: TripManagerComponent }, 
    { path: 'new', component: TripNewComponent } 
    { path: ':id', component: TripDetailComponent }, 
    ] 
} 

Answer 2

Nie można odwzorować dwie ścieżki z tych samych ścisłych segmentów jako parametr (: id dopasowuje ścieżkę nowy).

Można jednak ręcznie odwzorować poprawne działanie w następującej konfiguracji.

{ 
    path: '', 
    children: [ 
    { path: '', component: TripManagerComponent }, 
    { path: ':id', component: TripDetailComponent }, 
    ] 
} 

do składnika TripDetailComponent, można wywołać proces tworzenia, jeśli parametr jest równy nowe.

this.route.params.subscribe(
     params => { 
       let id = params['id']; 
       if (id === "new") { 
        // Create a new element 
       } else if(p.match(/\d+/)){ 
        // Display the details 
       } else { 
        // Handle when id is not a number 
       } 
     }, 
     // Handle error 
     err => this.logger.error(err), 
     //Complete 
     () => {} 
    ); 

Ten answer jest powiązany z tym.