Parametro percorso opzionale 2 angolare

È possibile avere un parametro di rotta opzionale nella rotta Angolare 2? Ho provato la sintassi Angular 1.x in RouteConfig ma ho ricevuto l'errore seguente:

"ECCEZIONE ORIGINALE: Percorso" / utente /: id? "Contiene"? "Che non è consentito in una configurazione di percorso."

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

È possibile definire più percorsi con e senza parametro:

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

e gestisci il parametro opzionale nel tuo componente:

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

    if (paramId) {
        ...
    }
}

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

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

In questo modo il componente non viene ridistribuito quando viene aggiunto il parametro.

Si consiglia di utilizzare un parametro di query quando le informazioni sono facoltative.

Instradare parametri o parametri query?

Non c'è una regola dura e veloce. In generale,

preferisce un parametro di rotta quando

• il valore è richiesto.
• il valore è necessario per distinguere un percorso da un altro.

preferisce un parametro di query quando

• il valore è facoltativo.
• il valore è complesso e / o multi-variabile.

da https://angular.io/guide/router#optional-route-parameters

Devi solo eliminare il parametro dal percorso.

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

Angolare 4 - Soluzione per indirizzare l'ordinamento del parametro opzionale:

FAI QUESTO:

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

Si noti che i percorsi productse products/:idsono nominati esattamente allo stesso modo. L'angolo 4 seguirà correttamente productsper le rotte senza parametri e se seguirà un parametro products/:id.

Tuttavia, il percorso per la rotta non parametrica nonproducts deve avere una barra finale, altrimenti angolare lo tratterà erroneamente come una traccia parametro. Quindi nel mio caso, ho avuto la barra finale per i prodotti e non funzionava.

NON FARE QUESTO:

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

la risposta di rerezz è piuttosto carina ma ha un grave difetto. Fa Usereseguire nuovamente il ngOnInitmetodo al componente.

Potrebbe essere problematico quando fai delle cose pesanti lì e non vuoi che venga ripetuto quando passi dalla rotta non parametrica a quella parametrica. Sebbene queste due route abbiano lo scopo di imitare un parametro url opzionale, non diventano 2 route separate.

Ecco cosa suggerisco di risolvere il problema:

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      { path: ':id', component: UserWithParam, name: 'Usernew' }
    ]
  }
];

Quindi è possibile spostare la logica responsabile della gestione del parametro sul UserWithParamcomponente e lasciare la logica di base nel Usercomponente. Qualunque cosa tu faccia User::ngOnInitnon verrà eseguita di nuovo quando navighi da / utente a / utente / 123 .

Non dimenticate di mettere il <router-outlet></router-outlet>nel Usermodello 's.

Le risposte suggerite qui, inclusa la risposta accettata da rerezz che suggeriscono di aggiungere più voci di percorso, funzionano bene.

Tuttavia, il componente verrà ricreato quando si cambia tra le voci della rotta, ovvero tra la voce della rotta con il parametro e la voce senza il parametro.

Se vuoi evitarlo, puoi creare il tuo abbinamento percorsi che corrisponderà a entrambi i percorsi:

export function userPageMatcher(segments: UrlSegment[]): UrlMatchResult {
    if (segments.length > 0 && segments[0].path === 'user') {
        if (segments.length === 1) {
            return {
                consumed: segments,
                posParams: {},
            };
        }
        if (segments.length === 2) {
            return {
                consumed: segments,
                posParams: { id: segments[1] },
            };
        }
        return <UrlMatchResult>(null as any);
    }
    return <UrlMatchResult>(null as any);
 }

Quindi utilizzare il matcher nella configurazione del percorso:

const routes: Routes = [
    {
        matcher: userPageMatcher,
        component: User,
    }
];

Con angular4 dobbiamo solo organizzare i percorsi insieme in 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 sa quale sarà il prossimo percorso in base ai parametri dell'ID opzione.

Sono andato in un'altra istanza di questo problema e nella ricerca di una soluzione è venuto qui. Il mio problema era che stavo facendo i bambini, e anche il caricamento lento dei componenti per ottimizzare un po 'le cose. In breve, se sei pigro nel caricare il modulo genitore. La cosa principale era che usavo "/: id" nel percorso, e si lamenta del fatto che "/" ne faccia parte. Non è il problema esatto qui, ma si applica.

Instradamento delle app dal 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 figlio pigri caricati

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

Non posso commentare, ma in riferimento a: parametro di percorso opzionale Angular 2

un aggiornamento per Angular 6:

import {map} from "rxjs/operators"

constructor(route: ActivatedRoute) {
  let paramId = route.params.pipe(map(p => p.id));

  if (paramId) {
    ...
  }
}

Vedere https://angular.io/api/router/ActivatedRoute per ulteriori informazioni sul routing Angular6.

Di fronte a un problema simile con caricamento lento ho fatto questo:

const routes: Routes = [
  {
    path: 'users',
    redirectTo: 'users/',
    pathMatch: 'full'
  },
  {
    path: 'users',
    loadChildren: './users/users.module#UserssModule',
    runGuardsAndResolvers: 'always'
  },
[...]

E poi nel componente:

  ngOnInit() {
    this.activatedRoute.paramMap.pipe(
      switchMap(
        (params: ParamMap) => {
          let id: string = params.get('id');
          if (id == "") {
            return of(undefined);
          }
          return this.usersService.getUser(Number(params.get('id')));
        }
      )
    ).subscribe(user => this.selectedUser = user);
  }

Per di qua:

• Il percorso senza /viene reindirizzato al percorso con. A causa di pathMatch: 'full', viene reindirizzato solo tale percorso completo specifico.

• Quindi, users/:idviene ricevuto. Se il percorso effettivo era users/, idè "", quindi registralo ngOnInite agisci di conseguenza; altrimenti, idè l'id e procedi.

• Il resto del componect agisce su selectedUsernon è definito (* ngIf e cose del genere).