J'ai une application avec une sortie de routeur, dans laquelle je veux charger les modules avec leurs propres sous-routes.
Cela devrait donner les routes:
this.router.navigate(["child2"], { relativeTo: this.route.parent });
dans le module racine de l'application, je définis quelques routes qui chargeront paresseusement le module enfant
this.router.navigate(["child2"]);
et dans le Lazy1Module, les routes suivantes
const routes: Routes = [
{path: 'child1', component: Child1Component},
{path: 'child2', component: Child2Component},
{path: '**', redirectTo: 'child1'}
];
que j'ajoute avec RouterModule.forChild (routes) comme d'habitude.
Cela semble fonctionner correctement, et quand je vais à / lazy1 / child1, cela résout très bien. P >
Cependant, quand j'essaye de naviguer entre les enfants, je rencontre des ennuis. Comme le module chargé paresseusement en lui-même ne devrait pas connaître ou prendre en charge les routes en dehors de lui-même, je suppose que je pourrais naviguer de child1 à child2 en utilisant
export const routes: Routes = [
{path:'', component: HelloComponent},
{path: 'lazy1', loadChildren: () => import('./lazy1-module/index').then(mod => mod.Lazy1Module)}
];
Cela entraîne Erreur "route not found".
Je peux le faire fonctionner en ajoutant
/ /lazy1/child1 /lazy1/child2
Mais cela semble faux. aussi "../child2" ne fonctionne pas.
En ajoutant la journalisation au routeur, il semble qu'il ajoute un "/" devant la route et commence à le résoudre à partir de la racine sans tenir compte des points.
J'utilise Angular 8.2.14
Exemple de Stackblitz ici: https://stackblitz.com/edit/angular-bqdchr
3 Réponses :
Jetez un œil à ceci stackblitz:
Je pense que c'est parce que vos routes paresseuses ne connaissent pas sa propre racine, vous devez donc ajouter:
path:'', component: LazyComponent, children: [
{ path: 'child1', component: Child1Component },
{ path: 'child2', component: Child2Component }
]
J'ai regardé le stackblitz, et il a une deuxième sortie de routeur dans le LazyComponent, que je n'ai pas. Je vois comment cela peut résoudre mon problème, mais j'espérais ne pas avoir une autre couche juste parce que.
ah je vois ce que tu veux dire maintenant.
Vous pouvez naviguer par des chemins absolus ou relatifs.
this.router.navigate(["child2"], { relativeTo: this.route.parent });
utilise un chemin absolu (car il n'y a pas d'indicateur relativeTo ) et accède à / enfant2 .
Vous n'avez pas de route définie pour / child2 mais pour /lazy1/child2.
L'erreur de la console vous indique que:
Erreur: aucune route ne peut correspondre. Segment d'URL: "enfant2"
Cela fonctionnerait si vous le réécriviez en:
this.router.navigate(['lazy1', 'child2']);
Votre exemple de travail utilise un chemin relatif:
this.router.navigate(['child2']);
Merci Steven, c'est une bonne description de ce que j'ai trouvé aussi. Seriez-vous alors d'accord ou pas d'accord avec moi pour dire que ce comportement est étrange? Je suppose que la navigation vers «enfant2» (et non «/ enfant2») permettrait d'accéder à un frère ou à une sous-route, pas à un enfant racine. Mon cas d'utilisation est d'essayer de charger dynamiquement un module, qui pourrait être soit attaché à la racine (auquel cas cela fonctionne), soit dans un contexte comme dans l'exemple.
Vos itinéraires de paresseux comme:
this.router.navigate(["child2"], { relativeTo: this.route.parent });
//or
this.router.navigate(["../child2"],{ relativeTo: this.route});
Ensuite, vous pouvez faire
const routes: Routes = [
{path:'',children:[
{path: 'child1', component: Child1Component},
{path: 'child2', component: Child2Component}
]},
{path: '**', redirectTo: 'child1'}
];
Avez-vous essayé cela? Il me semble que cela ne fait aucune différence, et je dois encore ajouter la propriété relativeTo. J'apprécie vraiment vos efforts :) J'ai vraiment du mal à comprendre ce que devrait être le comportement par défaut attendu. Pour moi, il ne devrait pas être nécessaire d'ajouter une propriété relativeTo car la valeur par défaut devrait être le parent des routes actives. Dois-je déposer un bogue auprès de l'équipe Angular, ou est-ce vraiment logique comme ça?
votre stackblitz fourchu: stackblitz. com / edit /…
this.router.navigate (['/ lazy / child2']);Merci pour le commentaire, mais j'essaie de ne pas utiliser de chemins absolus car le module chargé paresseux peut être chargé dans différents contextes et n'a pas nécessairement «paresseux» comme parent.