Eğik 2 aşağıdaki gibi ben bu yollardan giderek ediyorum şöyle

Question

Çocuğum modül yolları diğer yolları ile url parametresi çakışmaları rota,

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

,

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

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

Ama Açısal new rotayı olarak algılar :id ve beni TripDetailComponent adresine yönlendirir.

Burada sorun, :id rotası için 'yeni' dizgeyi URL parametresi olarak algılar.

:id, yani view/:id için bir önek ekleyebilir ve bunu çalıştırabilirim. Ancak, url şablonunu olduğu gibi tutmam gerekiyor. Bunu yapmanın bir yolu var mı? Benim beklenen url kalıptır

,

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

Answer 1

Şu an :id güzergahı, new numaralı telefonu ve ayrıca yönlendirici diğer eşleşen rotalar için daha fazla bakmıyor.

Sipariş ilgili. :id yolundan önceki new rotasını, :id rotasından önce new rotası eşleştirin.

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

Answer 2

Sen parametre olarak aynı tam bölümleri ile iki yolu eşleyemezsiniz (: idyeni yolunu eşleşir). Ancak, doğru eylemi aşağıdaki yapılandırmada elle eşleştirebilirsiniz. Parametre yeni eşitse bileşenin TripDetailComponent içine

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

, sen oluşturma sürecini tetikleyebilir.

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 
     () => {} 
    ); 

Bu answer bununla ilgilidir.