Angulaire 2: demander à l'Enfant de Route Composant de Remplacer les Parents dans le routeur de sortie

Est-il un moyen pour afficher un enfant de route dans le parent de l'itinéraire <router-outlet>?

Par exemple, disons que nous avons deux itinéraires:

/users/12345

/users/12345/orders/12345

J'ai besoin de l'autre pour être un enfant de la première, mais j'ai aussi besoin de remplacer complètement le contenu de /users/12345 avec le contenu de /users/12345/orders/12345 plutôt que d'avoir /users/12345/orders/12345 dans le /users/12345 sous router-outlet.

Je pensais que je pouvais le faire simplement en nommant le niveau parent routeur-prise et les deux voies de la cible, mais à partir de la recherche, je l'ai fait (et les erreurs qu'il a causé) j'ai le sentiment que les noms étaient destinés à des utilisations secondaires quand il existe déjà un routeur principal-prise

InformationsquelleAutor John | 2017-03-16
  1. 14

    J'ai eu le même problème. C'est la façon dont je l'ai corrigé:

    const routes: Routes = [
   {
    path: '',
    children: [
         {
           path: '',
           component: ParentComponent,
         },
         {
           path: 'child',
           component: ChildComponent,
         }
     ]
   }
];
    • que faire si vous avez un enfant de module de routage de trop?
    • J'ai de même structure, mais il y a un problème. Composant Parent route est en fait un frère de l'enfant de l'itinéraire. Cela crée des problèmes pour exemple, si vous avez besoin pour résoudre certains de données pour le composant parent, mais aussi de le transmettre à l'enfant.
    InformationsquelleAutor N. berouain
  2. 12

    Vous pouvez le faire en définissant des routes, comme ceci :

    const routes : Routes = [
  { 
    path : 'user/:id',
    component : ParentComponent,
    children : [
      { path : '', component : UserComponent },
      { path : 'order/:id', component : OrderComponent }
    ]
  }
]

    ParentComponent's modèle aura seulement la <router-outlet> à la charge de ses enfants.

    InformationsquelleAutor YounesM
  3. 5

    Si vous avez besoin de cacher quelque chose (comme une grille de données, ou l'instruction panneau), basé sur un enfant de l'itinéraire actif vous pouvez simplement utiliser ce:

    <div *ngIf="outlet.isActivated == false">
   Please select a child route!
</div>

<router-outlet #outlet="outlet"></router-outlet>

    Il est important d'inclure #sortie="sortie" avec des guillemets parce que vous êtes à l'exportation d'un modèle de référence de variable.

    Il y a aussi des événements sur router-outlet pour l'activation et de désactivation.

    Une alternative est de obtenez de l'enfant itinéraire lorsque le NavigationEnd événement se produit, et de prendre des décisions que de les afficher ou les masquer. Pour les cas les plus simples, la première approche devrait fonctionner correctement.

    Pas non pertinentes à votre question, je ne pense pas, mais vous pouvez masquer complètement un router-outlet avec un *ngIf comme vous le feriez pour tout autre chose.

    • Cela a fonctionné pour moi, mais j'ai plusieurs articles et je veux cacher/montrer. Masquer/afficher fondamentalement interrupteurs va-et-vient entre le parent et l'enfant composant. j'ai des parent (section 1, 2 et 3). toutefois, lorsque l'article 1 de charges enfant composante , puis la section 1 du composant parent se cache comme vous l'avez dit. Maintenant, j'ai besoin de faire de même pour les sections 2 et 3. Maintenant, je vois que l'article 1 est être touché par 2 , comme prise de courant. est-il un moyen de contourner cela ? Merci
    InformationsquelleAutor Simon_Weaver
  4. 3

    modifier: je suis venu avec une nouvelle solution tournant autour de l'utilisation des directives de modèle qui permet la configuration des voies hiérarchiquement contre au même niveau.

    L'exemple de code/la version de démonstration peut être trouvé ici: https://stackblitz.com/edit/angular-routing-page-layout

    • Ce sujet de ma réponse ? N'est-il pas ce que vous cherchez ?
    • À l'aide de votre exemple, la question était de savoir sur la façon de remplacer "ParentComponent' avec 'OrderComponent' lorsque sur "commande/:id' dans le routeur de sortie que le programme d'installation ne serait pas accomplir
    • Comment cela fonctionne Angulaire 6?
    • Salut, @John. C'est une excellente solution! Mais comment voulez-vous naviguer vers une autre voie même niveau que le primaire? Il serait provoquer une erreur "Impossible de lire la propriété 'createEmbeddedView' undefined"
    • Si la situation est à la fois axes du volet: PageLevelComponent " et angulaire est de nouveau en utilisant le composant existant à partir de la première route, je ne suis pas sûr. Je suis sûr que nous allons exécuter dans le même problème une fois que nous obtenons plus de pages situé cette façon
    InformationsquelleAutor John
  5. 2
     let routes = [
  { 
    path: 'users/:id',
    component: UsersComponent
  },
  {
    path: 'users/:id/orders/:id',
    component: OrdersComponent
  }
 ];
    InformationsquelleAutor Julia Passynkova