Angolare2 router-presa multipla nello stesso modello

Question

È possibile avere una router-presa multipla nello stesso modello?

se sì, quindi come configurare i percorsi?

Sto usando angular2 beta.

Grazie.

Answer 1

sì, ma è necessario utilizzare l'instradamento ausiliario. è necessario dare un nome al router-outlet:

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

e configurare il percorso di configurazione:

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

check out questo esempio: http://plnkr.co/edit/JsZbuR?p=preview Anche questo video: https://www.youtube.com/watch?v=z1NB-HG0ZH4&feature=youtu.be

---

Aggiornamento per RC.5 Le route Aux sono leggermente cambiate: in y la nostra presa di router utilizza un nome:

<router-outlet name="aux"> 

nella configurazione del router:

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

Answer 2

Sì, è possibile, come detto da @tomer sopra. voglio aggiungere un punto alla risposta @tomer.

• in primo luogo è necessario fornire il nome allo router-outlet in cui si desidera caricare la seconda vista di routing nella visualizzazione. (routing ausiliario angolare2)

• Nell'instradamento angolare2 ci sono alcuni punti importanti.

  • path o aux (richiede esattamente uno di questi per indicare il percorso da mostrare come l'url).
  • componente, loader, redirectTo (richiede esattamente uno di questi, quale componente si desidera caricare sul routing)
  • nome o come (facoltativo) (richiede esattamente uno di questi, il nome che specifica al momento del routerLink)
  • dati (opzionali, tutto ciò che si desidera inviare con il percorso che si deve ottenere con routerParams alla fine del ricevitore.)

per ulteriori informazioni leggere fuori here e here.

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

Answer 3

La sintassi dei percorsi ausiliari è stata modificata con il nuovo router RC.3.

Esistono alcuni problemi noti con route aux, ma è disponibile il supporto di base.

È possibile definire percorsi di mostrare i componenti in una configurazione <router-outlet>

percorso di nome

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

Chiamato presa router

<router-outlet name="aux"> 

percorsi Naviga aux

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

Sembra navigazione percorsi aux da routerLink non è ancora supportato

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

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

non provato io stesso ancora

Vedi anche Angular2 router in one component

RC.5 routerLink DSL (parametro uguale a createUrlTree) https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#createUrlTree-anchor

Answer 4

È possibile avere più router-outlet nello stesso modello configurando il router e fornendo il nome alla propria presa router,

è possibile ottenere questo come segue.

Il vantaggio di questo approccio è che è possibile evitare l'URL dall'aspetto sporco con esso. es .:/home (aux: login) ecc.

Supponendo che sul carico si stia riavvolgendo appComponent.

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> 

aggiungete quanto segue al vostro router.

{ 
    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' 
     } 
    ] 
} 

Ora, quando/home è caricato appComponent otterrà di carico con template assegnato, quindi router angolare controllerà il percorso e caricare il componente bambini in uscita router specificato sulla base del nome.

come sopra è possibile configurare il router per avere più router-outlet nello stesso percorso.

Answer 5

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

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

`

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