web-dev-qa-db-fra.com

Angular2 multi routeur-sortie dans le même modèle

Est-il possible d'avoir plusieurs routeur-prise dans le même modèle?

Si oui, comment configurer les routes?

J'utilise angular2 beta.

angularangular2-routingangular2-template
69
Islam Shaheen

oui, vous pouvez, mais vous devez utiliser le routage aux. vous devrez donner un nom à votre routeur-prise:

<router-outlet name="auxPathName"></router-outlet>

et configurez votre route config:

@RouteConfig([
  {path:'/', name: 'RetularPath', component: OneComponent, useAsDefault: true},
  {aux:'/auxRoute', name: 'AuxPath', component: SecondComponent}
])

regardez cet exemple: http://plnkr.co/edit/JsZbuR?p=preview Aussi cette vidéo: https://www.youtube.com/watch?v=z1NB -HG0ZH4 & feature = youtu.be

La mise à jour pour les routes Aux RC.5 a un peu changé: dans la prise de votre routeur, utilisez un nom:

<router-outlet name="aux">

Dans votre configuration de routeur:

{path: '/auxRouter', component: secondComponentComponent, outlet: 'aux'}
48
Tomer Almog

Vous pouvez avoir plusieurs routeur-prise dans le même modèle en configurant votre routeur et en fournissant un nom à votre routeur-prise. Pour ce faire, procédez comme suit.

L’avantage de l’approche ci-dessous est qu’il est possible d’éviter une URL sale. Par exemple:/home (aux: login), etc.

En supposant que vous chargez appComponent à la charge.

app.component.html

<div class="layout">
    <div class="page-header">
        //first outlet to load required component
        <router-outlet name='child1'></router-outlet>
    </div>
    <div class="content">
        //second outlet to load required component
        <router-outlet name='child2'></router-outlet>
    </div>
</div>

Ajoutez ce qui suit à votre routeur.

{
    path: 'home',  // you can keep it empty if you do not want /home
    component: 'appComponent',
    children: [
        {
            path: '',
            component: childOneComponent,
            outlet: 'child1'
        },
        {
            path: '',
            component: childTwoComponent,
            outlet: 'child2'
        }
    ]
}

Maintenant, lorsque/home est chargé, appComponent sera chargé avec le modèle alloué, puis le routeur angular vérifiera la route et chargera le composant enfants dans la sortie de routeur spécifiée en fonction du nom.

Comme ci-dessus, vous pouvez configurer votre routeur pour avoir plusieurs routeur-prise dans le même itinéraire.

36
jigar gala

La syntaxe des routes auxiliaires a changé avec le nouveau routeur RC.3.

Il existe quelques problèmes connus avec les itinéraires Aux mais un support de base est disponible.

Vous pouvez définir des itinéraires pour afficher les composants dans un nom <router-outlet> nommé.

Route config

{path: 'chat', component: ChatCmp, outlet: 'aux'}

Routeur nommé

<router-outlet name="aux">

Naviguer aux routes

this._router.navigateByUrl("/crisis-center(aux:chat;open=true)");

Il semble que la navigation aux routes auxiliaires de routerLink n’est pas encore prise en charge.

<a [routerLink]="'/team/3(aux:/chat;open=true)'">Test</a>

<a [routerLink]="['/team/3', {outlets: {aux: 'chat'}}]">c</a>

Pas encore essayé moi-même

Voir également routeur angulaire2 dans un composant

RC.5 routerLink DSL (identique au paramètre createUrlTree) https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#createUrlTree-anchor)

18
Günter Zöchbauer

<a [routerLink]="[{ outlets: { list:['streams'], details:['parties'] } }]">Link</a>

<div id="list">
    <router-outlet name="list"></router-outlet>
</div>
<div id="details">
    <router-outlet name="details"></router-outlet>
</div>

`

 {
    path: 'admin',
    component: AdminLayoutComponent,
    children:[
      {
        path: '',
        component: AdminStreamsComponent, 
        outlet:'list'
      },
      {
        path: 'stream/:id',
        component: AdminStreamComponent,
        outlet:'details'
      }
    ]
  }
13
Tomiwa Adefokun

Oui, vous pouvez comme dit par @tomer ci-dessus. Je veux ajouter un point à la réponse de @tomer.

  • vous devez d’abord donner un nom au router-outlet où vous voulez charger la deuxième vue de routage dans votre vue. (aux routage angular2.)

  • Dans le routage angular2, quelques points importants sont ici.

    • path ou aux (nécessite exactement l'un de ceux-ci pour donner le chemin que vous devez afficher comme URL).
    • composant, loader, redirectTo (requiert exactement l'un de ceux-ci, quel composant vous souhaitez charger sur le routage)
    • name or as (facultatif) (requiert exactement l'un de ceux-ci, le nom spécifié à la connexion à routerLink)
    • data (facultatif, tout ce que vous voulez envoyer avec le routage que vous devez obtenir en utilisant routerParams chez le destinataire.)

pour plus d'informations, lisez ici et ici.

import {RouteConfig, AuxRoute} from 'angular2/router';
@RouteConfig([
  new AuxRoute({path: '/home', component: HomeCmp})
])
class MyApp {}
3
Pardeep Jain

Il semble y avoir un autre moyen (plutôt compliqué) de réutiliser le routeur-prise dans un modèle:

https://stackblitz.com/edit/router-outlet-twice-with-events

Le routeur-prise est enveloppé par un ng-template. Le modèle est mis à jour en écoutant les événements du routeur. À chaque événement, le modèle est échangé et à nouveau échangé avec un espace réservé vide. Sans cette "permutation", le modèle ne serait pas mis à jour.

Cela ne semble toutefois pas être une approche recommandée, car l’échange de deux modèles semble un peu compliqué.

0
Tobias Gassmann