Parametro percorso angolare 2 opzionale

Question

È possibile avere un parametro di percorso opzionale nel percorso Angolare 2? Ho provato la sintassi 1.x angolare in RouteConfig ma ha ricevuto sotto l'errore:

"ORIGINAL EXCEPTION: Path "/user/:id?" contains "?" which is not allowed in a route config."

@RouteConfig([ 
{ 
    path: '/user/:id?', 
    component: User, 
    as: 'User' 
}]) 

Answer 1

È possibile definire più percorsi con e senza parametri:

@RouteConfig([ 
    { path: '/user/:id', component: User, name: 'User' }, 
    { path: '/user', component: User, name: 'Usernew' } 
]) 

e gestire il parametro opzionale nel componente :

constructor(params: RouteParams) { 
    var paramId = params.get("id"); 

    if (paramId) { 
     ... 
    } 
} 

Vedi anche il relativo problema github: https://github.com/angular/angular/issues/3525

Answer 2

Si consiglia di utilizzare un parametro di query quando l'informazione è facoltativa.

Route Parameters or Query Parameters?

There is no hard-and-fast rule. In general,

prefer a route parameter when

• the value is required.
• the value is necessary to distinguish one route path from another.

prefer a query parameter when

• the value is optional.
• the value is complex and/or multi-variate.

da https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters

Hai solo bisogno di togliere il parametro dal percorso percorso.

@RouteConfig([ 
{ 
    path: '/user/', 
    component: User, 
    as: 'User' 
}]) 

Answer 3

Con angular4 abbiamo solo bisogno di organizzare percorsi insieme nella gerarchia

const appRoutes: Routes = [ 
    { path: '', component: MainPageComponent }, 
    { path: 'car/details', component: CarDetailsComponent }, 
    { 
    path: 'car/details/platforms-products', 
    component: CarProductsComponent 
    }, 
    { path: 'car/details/:id', component: CadDetailsComponent }, 
    { 
    path: 'car/details/:id/platforms-products', 
    component: CarProductsComponent 
    } 
]; 

Questo funziona per me. In questo modo il router conosce qual è il prossimo percorso in base ai parametri dell'opzione.

Answer 4

angolare 4 - Soluzione per affrontare l'ordinamento del parametro opzionale:

fare questo:

const appRoutes: Routes = [ 
    {path: '', component: HomeComponent}, 
    {path: 'products', component: ProductsComponent}, 
    {path: 'products/:id', component: ProductsComponent} 
] 

Si noti che le products e products/:id percorsi prendono il nome esattamente lo stesso. Angular 4 seguirà correttamente products per rotte senza parametro e se un parametro seguirà products/:id.

Tuttavia, il percorso per il percorso non parametrico products deve non avere una barra finale, altrimenti angolare lo tratterà non correttamente come percorso parametro. Quindi nel mio caso, ho avuto la barra finale per i prodotti e non funzionava.

non farlo:

... 
{path: 'products/', component: ProductsComponent}, 
{path: 'products/:id', component: ProductsComponent}, 
... 

Answer 5

imbattuto in un'altra istanza di questo problema, e nella ricerca di una soluzione per è venuto qui. Il mio problema era che stavo facendo i bambini, e il carico pigro dei componenti, per ottimizzare un po 'le cose. In breve, se si è pigri a caricare il modulo genitore. La cosa principale era usare il mio '/: id' nel percorso, ed è una lamentela sul fatto che '/' ne faccia parte. Non è esattamente il problema qui, ma si applica.

App-instradamento da genitore

... 
const routes: Routes = [ 
    { 
    path: '', 
    children: [ 
     { 
     path: 'pathOne', 
     loadChildren: 'app/views/$MODULE_PATH.module#PathOneModule' 
     }, 
     { 
     path: 'pathTwo', 
     loadChildren: 'app/views/$MODULE_PATH.module#PathTwoModule' 
     }, 
... 

percorsi Bambino pigro caricato

... 
const routes: Routes = [ 
    { 
    path: '', 
    children: [ 
     { 
     path: '', 
     component: OverviewComponent 
     }, 
     { 
     path: ':id', 
     component: DetailedComponent 
     }, 
    ] 
    } 
]; 
... 

Answer 6

{path: 'users', redirectTo: 'users/'}, 
{path: 'users/:userId', component: UserComponent} 

In questo modo il componente non il rendering viene eseguito quando viene aggiunto il parametro.