Paramètre d'itinéraire facultatif angulaire 2

Est-il possible d'avoir un paramètre d'itinéraire facultatif dans l'itinéraire Angular 2? J'ai essayé la syntaxe Angular 1.x dans RouteConfig mais j'ai reçu l'erreur ci-dessous:

"EXCEPTION ORIGINALE: Chemin" / user /: id? "Contient"? "Qui n'est pas autorisé dans une configuration de route."

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

Vous pouvez définir plusieurs itinéraires avec et sans paramètre:

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

et gérez le paramètre facultatif dans votre composant:

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

    if (paramId) {
        ...
    }
}

Voir également le problème github associé: https://github.com/angular/angular/issues/3525

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

De cette façon, le composant n'est pas restitué lorsque le paramètre est ajouté.

Il est recommandé d'utiliser un paramètre de requête lorsque les informations sont facultatives.

Paramètres d'itinéraire ou paramètres de requête?

Il n'y a pas de règle absolue. En général,

préférez un paramètre d'itinéraire lorsque

• la valeur est obligatoire.
• la valeur est nécessaire pour distinguer un chemin de route d'un autre.

préférez un paramètre de requête lorsque

• la valeur est facultative.
• la valeur est complexe et / ou multi-variée.

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

Il vous suffit de retirer le paramètre du chemin de la route.

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

Angular 4 - Solution pour traiter la commande du paramètre optionnel:

FAITES CECI:

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

Notez que les routes productset products/:idsont nommées exactement de la même manière. Angular 4 suivra correctement productspour les routes sans paramètre, et si un paramètre il suivra products/:id.

Cependant, le chemin de la route sans paramètre neproducts doit pas avoir de barre oblique à la fin, sinon angular le traitera de manière incorrecte comme un chemin de paramètre. Donc, dans mon cas, j'avais la barre oblique finale pour les produits et cela ne fonctionnait pas.

NE FAITES PAS CELA:

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

La réponse de rerezz est plutôt sympa mais elle a un grave défaut. Cela oblige le Usercomposant à réexécuter la ngOnInitméthode.

Cela peut être problématique lorsque vous faites des choses lourdes là-bas et que vous ne voulez pas qu'il soit réexécuté lorsque vous passez de la route non paramétrique à la route paramétrique. Bien que ces deux routes soient destinées à imiter un paramètre d'url facultatif, elles ne deviennent pas 2 routes distinctes.

Voici ce que je suggère pour résoudre le problème:

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

Vous pouvez ensuite déplacer la logique responsable de la gestion du paramètre vers le UserWithParamcomposant et laisser la logique de base dans le Usercomposant. Tout ce que vous faites ne User::ngOnInitsera pas exécuté à nouveau lorsque vous naviguerez de / user vers / user / 123 .

N'oubliez pas de mettre le <router-outlet></router-outlet>dans le Usermodèle de.

Les réponses suggérées ici, y compris la réponse acceptée de rerezz qui suggèrent d'ajouter plusieurs entrées d'itinéraire fonctionnent correctement .

Cependant, le composant sera recréé lors du passage entre les entrées de route, c'est-à-dire entre l'entrée de route avec le paramètre et l'entrée sans le paramètre.

Si vous voulez éviter cela, vous pouvez créer votre propre calculateur d'itinéraire qui correspondra aux deux itinéraires:

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);
 }

Ensuite, utilisez le matcher dans votre configuration d'itinéraire:

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

Avec angular4, nous avons juste besoin d'organiser les itinéraires ensemble dans la hiérarchie

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 
  }
];

Cela fonctionne pour moi. De cette façon, le routeur sait quelle est la prochaine route en fonction des paramètres d'ID d'option.

Ran dans une autre instance de ce problème, et en cherchant une solution, est venu ici. Mon problème était que je faisais les enfants et le chargement paresseux des composants pour optimiser un peu les choses. En bref, si vous chargez paresseusement le module parent. Le principal était mon utilisation de «/: id» dans la route, et je me suis plaint de «/» en faisant partie. Ce n'est pas le problème exact ici, mais cela s'applique.

Routage de l'application depuis le parent

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

Routes enfants chargées paresseusement

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

Je ne peux pas commenter, mais en référence à: Paramètre d'itinéraire facultatif Angular 2

une mise à jour pour Angular 6:

import {map} from "rxjs/operators"

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

  if (paramId) {
    ...
  }
}

Voir https://angular.io/api/router/ActivatedRoute pour plus d'informations sur le routage Angular6.

Face à un problème similaire avec le chargement paresseux, j'ai fait ceci:

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

Et puis dans le composant:

  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);
  }

Par ici:

• L'itinéraire sans /est redirigé vers l'itinéraire avec. En raison de la pathMatch: 'full', seule cette route complète spécifique est redirigée.

• Ensuite, users/:idest reçu. Si l'itinéraire réel était users/, idest "", alors enregistrez-le ngOnInitet agissez en conséquence; sinon, idest l'identifiant et continuez.

• Le reste du composant agit sur selectedUserest ou non indéfini (* ngIf et les choses comme ça).