J'essaie de gérer le routage avec des modules imbriqués de meilleure manière angulaire.
Disons que je démarre l'application avec URL localhost: 5000. Je devrais voir C'est ce que j'ai jusqu'à présent:
HTTPS: //stactblitz.com/edit/angular6-Material-Components-Demo-jb9y3u?file=src/app/home/home-routing.module.ts
( et image pour une meilleure explication:
homecomponent avec un contenu sur le côté gauche et sur le côté droit, j'ai ContactComponent . Si je vais aller à localhost: 5000 / info, alors ContactComponent doit être remplacé par Infocomponent . Comment puis-je y aller?
ContactComponent n'est pas rendu et si je vais à localhost: 5000 / info, alors infocomponent rendra dans AppComponent
3 Réponses :
Essayez ceci dans App-Routing.MODULE
const routes: Routes = [
{
path: "",
component: HomeComponent,
children: [
{
path: "",
component: ContactComponent,
},
{
path: "info",
component: InfoComponent,
},
]
},
];
Cela marche. L'itinéraire haut vide pour le Homecomponant n'a pas de but si cela correspondra toujours.
Vous n'avez maintenant aucun but pour la sortie de routeur de niveau supérieur (dans l'appelcomponent). Si cela aurait un but (pour faire correspondre le Homecomponent sur dire «/ home»), vous auriez pu correspondre à un deuxième itinéraire dans la deuxième sortie de routeur avec des enfants de la route «Accueil» (ContactComponent => '/ Accueil / Contact "et infocomponent => '/ home / info').
Vous avez eu des problèmes avec vos itinéraires. Vous devriez en apprendre davantage sur l'utilisation de la propriété des enfants de la route.
Aussi, faites attention à la pathmatch
lien: https://stackblitz.com/edit/angular6-material-components-demo- rfeaup
Répondre au commentaire, oui j'ai été ajouté paresseux. Sinon, je ne vois pas quel est le sens d'utiliser le module en vedette. Le module paresseux est un module fonctionnel qui sépare une partie de la fonctionnalité d'application. Si vous utilisez des modules paresseux, il est un peu mieux pour le client car le client ne devrait pas attendre toute l'application chargée, mais le noyau.
plus sur la chargement paresseux dans l'application angulaire: https://angular.io/guide / Chargement paresseux-ngmodules
Eh bien, et à propos de "enfants" - "contient tous les itinéraires enfants activés sous la route actuelle" - Selon la documentation officielle.
Je crois que vous pouvez trouver utile également: https://angular.io / Guide / Routeur # Enfant-Route-configuration
Nice, c'est presque une bonne réponse. Mais peut-être que vous voulez expliquer que vous avez ajouté une chargement paresseuse (et qu'est-ce que c'est), et expliquez brièvement comment les enfants la propriété fonctionne ou peut-être un lien vers les documents officiels? Bienvenue pour, de toute façon! =)
Si je ne voudrais pas utiliser de chargement paresseux à quoi ressemblerait l'Appmodule? au lieu de loadchildren: './home/home.module#homemodule',
Vous souhaitez importer le Homemodule dans Appmodule. Et ajoute ce qui suit dans le routage de l'application, sous le chemin Homecomponant: enfants: [{chemin: '', composant: ContactComponce}] Réécrivez de loadchildren à 'Path:' ', Composant: Homecomponent'
Donc, comme @andreas Högbom a répondu. Droite?
Yeap, mais n'oubliez pas d'importer Homemodule dans Appmodule.