1
votes

Les routes enfants ne sont pas détectées dans Angular

Je travaille sur une application ionique (Ionic 5) et il semble que je ne parviens pas à obtenir les routes pour qu'elles se comportent correctement. Voici les itinéraires de mon application.

Mais il semble que je ne puisse pas faire fonctionner cette URL / state / test-centers

Angular ne trouve pas cette route. Voici la trace

J'essayais juste ça .. J'ai essayé ça aussi .. Cela n'a pas fonctionné non plus ..

{
    path: "state",
    component: StateComponent,
    pathMatch: "full",
    children: [
      { path: "test-centers", component: TestCentersComponent, pathMatch: "full" }
    ]
  }

angular ionic-framework ionic5

5 commentaires

Le petit refactoring dans la structure d'itinéraire est-il correct?

Salut @GytisTenovimas S'il vous plaît, faites-moi savoir ce que vous voulez me faire. Dans mes applications précédentes, j'avais l'habitude de créer des modules lorsqu'une route a plusieurs pages enfants, mais comme cette application est beaucoup plus simple, je ne voulais pas créer de modules. Dois-je créer des modules pour que les racines enfants fonctionnent correctement?

Voir ma réponse ci-dessous. Je pense que le principal problème est avec pathMatch: 'full' ici parce que vous ajoutez plus que simplement / state dans votre URL.

Pourquoi utilisez-vous des enfants pour les enfants?

Est-ce que @MostafaHarb n'a pas fonctionné non plus .. J'ai également édité ma question.

3 Réponses :

0
votes

vous n'avez pas besoin de la stratégie pathMatch , votre routage doit être comme ça

{
  path: "state",
  component: StateComponent,
   children: [
   path: "",
   component: StateComponent,
    children: [
     {path: "test-centers" , component:TestCentersComponent}
   ]
 ] 
}

2 commentaires

J'ai essayé ceci ... Mais dans ce cas, le composant d'état est chargé à la place du testeur. Tant que je sais que la technique de correspondance d'URL par défaut d'Angular est le préfixe .. donc dès qu'il obtient l'état dans l'URL, il l'utilise à la place. davantage.

vous parlez bien, mais angulaire correspond à tous les segments de l'itinéraire afin qu'il ne s'arrête pas à la première correspondance s'il y a un autre segment dans l'URL, cette URL peut aider angular.io/guide/router#child-route-configuration

0
votes

Scénario testé:

<router-outlet></router-outlet>

De plus, vous devez ajouter ceci à votre StateComponent:

{
    path: 'state',
    component: StateComponent,
    children: [
      {
        path: 'centers',
        pathMatch: 'full',
        component: TestCentersComponent,
      },
    ],
},

Petits changements dans votre itinéraire. Je pense que pathMatch: 'full' n'est pas nécessaire car il correspond à une route entière, mais vous ajoutez / test-centres qui ne correspond pas.

De plus, si vous ne prévoyez pas d'ajouter plus d'enfants de premier niveau, alors je pense que l'enfant de deuxième niveau peut être déplacé vers le premier niveau puisque vous n'ajoutez que chemin: '' code> qui ne fait pas grand-chose.

6 commentaires

Je l'ai fait, mais si je ne spécifie pas la correspondance complète, il charge le composant d'état à la place .. quelle douleur !! :( Je pense que la technique de correspondance par défaut d'angular est le préfixe, donc chaque fois qu'il voit l'état / les centres, il correspond au chemin "état" et charge ce composant .. Je deviens fou ..

Que veux-tu dire? À quelle URL vous essayez d'accéder, qu'est-ce que vous obtenez et qu'espérez-vous obtenir?

J'ai deux composants, State et TestCenters, lorsque j'accède à localhost: 8100 / state => Cela me donne l'état composant, Et quand j'accède à localhost: 8100 / state / test-centers => Il charge également le composant Statement. Je prévois de charger le composant TestCener à la place.

Okey, je connais peut-être le problème. Vérifiez ma réponse mise à jour. Je pense que vous n'avez pas ajouté dans votre StateComponent.

Je ne voulais pas ajouter de composant de centres dans le composant d'état. Je voulais mettre à jour l'ensemble de la fenêtre d'affichage (il s'agit essentiellement d'une page en ionique). Je voulais donc qu'il soit poussé dans la sortie du routeur racine. Quoi qu'il en soit, j'ai laissé de l'espoir et au lieu de définir les enfants, je ne fais que définir toutes les routes au niveau racine ...

Ensuite, cela ne fonctionne pas tout à fait comme vous le pensez. Tous les composants parents seront affichés. Si vous ne souhaitez afficher qu'un seul composant, il ne peut pas être en tant qu'enfant à moins que le composant parent n'ait uniquement

0
votes

Si vous souhaitez que le contenu TestCentersComponent soit affiché en tant qu'enfant de StateComponent , incluez dans le modèle du StateComponent code> StateComponent et utilisez la définition d'itinéraire suivante. Vous pouvez y accéder avec l'url / state / test-centers et vous verrez le composant parent rendu avec le modèle de composant enfant à la place du point de vente.

{
  path: 'state',
  component: StateContainerComponent,
  children: [
    { path: 'test-centers', component: TestCentersComponent },
    { path: '', component: StateComponent },
  ]
}

Un autre moyen consiste à utiliser un troisième composant, StateContainerComponent , agissant comme un espace réservé de conteneur / page / disposition qui n'a rien d'autre qu'un à l'intérieur. Cette approche rendra le StateComponent ou le TestCentersComponent mais pas les deux comme un rendu parent-enfant comme la méthode ci-dessus. Il est également accessible avec l'url /state/test-centers .

{
  path: 'state',
  component: StateComponent,
  children: [
    { path: 'test-centers', component: TestCentersComponent },
  ]
}

Voici un stackblitz demo présentant les deux approches, notant que pour cette dernière j'ai utilisé la route state-container juste à des fins de démonstration.

0 commentaires