Angulaire 2 facultatif route paramètre

Question

Angulaire 2 facultatif route paramètre

Est-il possible d'avoir un paramètre optionnel de route dans la route angulaire 2? J'ai essayé L'angulaire 1.x syntaxe dans RouteConfig mais reçu ci-dessous erreur:

"EXCEPTION originale: chemin" / utilisateur/: id?"contient "?"ce qui n'est pas autorisé dans une configuration de route."

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

93

angular javascript

demandé sur Günter Zöchbauer 2015-12-10 21:03:49

7 réponses

score 167 · Answer 1

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 optionnel dans votre composant:

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

    if (paramId) {
        ...
    }
}

Voir Aussi Le problème GitHub associé: https://github.com/angular/angular/issues/3525

score 29 · Answer 2

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 stricte. En général,

Préférez un paramètre de route lorsque

la valeur est requise.

la valeur est nécessaire pour distinguer un chemin d'itinéraire d'un autre.

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

la valeur est facultative.

le la valeur est complexe et / ou multi-variable.

À Partir de 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'
}])

score 13 · Answer 3

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

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

score 9 · Answer 4

Angular 4 - Solution pour répondre à l'ordre 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 products et products/:id sont nommées exactement de la même manière. Angular 4 suivra correctement products pour les routes sans paramètre, et si un paramètre il suivra products/:id.

Cependant, le chemin de la route non-paramètre products doit Pas avoir une barre oblique de fin, sinon angular le traitera incorrectement comme un chemin de paramètre. Donc dans mon cas, j'ai eu de fuite slash pour les produits et cela ne fonctionnait pas.

NE FAITES PAS CECI:

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

score 2 · Answer 5

Avec angular4, nous avons juste besoin d'organiser les routes 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 quel est l'itinéraire suivant en fonction des paramètres d'ID d'option.

score 2 · Answer 6

La réponse de Rerezz est plutôt sympa mais elle a un sérieux défaut. Il provoque le composant User pour relancer la méthode ngOnInit.

Cela peut être problématique lorsque vous faites des choses lourdes là-bas et que vous ne voulez pas qu'elles soient réexécutées 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 url optionnel, 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' }
    ]
  }
];

Ensuite, vous pouvez déplacer la logique responsable de la gestion du paramètre au composant UserWithParam et laisser la logiquebase dans le composant User. Tout ce que vous faites dans User::ngOnInit ne sera pas exécuté à nouveau lorsque vous naviguez de / user à / user / 123.

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

score 1 · Answer 7

Couru dans une autre instance de ce problème, et dans la recherche d'une solution à cela est venu ici. Mon problème était que je faisais les enfants, et le chargement paresseux des composants aussi bien pour optimiser les choses un peu. En bref si vous êtes paresseux chargement du module parent. La chose principale était mon utilisation '/: id 'dans la route, et ce sont des plaintes au sujet de' / ' en faisant partie. Pas le problème exact ici, mais il s'applique.

App-routage du parent

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

Itinéraires enfants chargés paresseux

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

Las etiquetas más populares

Angulaire 2 facultatif route paramètre

7 réponses