Angular2 enrutador-salida múltiple en la misma plantilla

¿Es posible tener múltiples enrutadores en la misma plantilla?

Si es así, ¿cómo configurar las rutas?

Estoy usando angular2 beta.

sí, puede, pero necesita usar el enrutamiento auxiliar. Deberá dar un nombre a la salida de su enrutador:

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

y configure la configuración de su ruta:

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

Mira este ejemplo: http://plnkr.co/edit/JsZbuR?p=preview También este video: https://www.youtube.com/watch?v=z1NB-HG0ZH4&feature=youtu.be

La actualización para las rutas auxiliares RC.5 ha cambiado un poco: en la salida de su enrutador use un nombre:

<router-outlet name="aux">

En la configuración de su enrutador:

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

Puede tener múltiples salidas de enrutador en la misma plantilla configurando su enrutador y proporcionando un nombre a su salida de enrutador, puede lograr esto de la siguiente manera.

La ventaja del siguiente enfoque es que puede evitar una URL sucia con él. por ejemplo: / home (aux: login) etc.

Suponiendo que en la carga está iniciando 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>

Agregue lo siguiente a su enrutador.

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

Ahora, cuando se carga / home, appComponent se cargará con la plantilla asignada, luego el enrutador angular verificará la ruta y cargará el componente secundario en la salida del enrutador especificada según el nombre.

Como arriba, puede configurar su enrutador para tener múltiples salidas de enrutador en la misma ruta.

La sintaxis de las rutas auxiliares ha cambiado con el nuevo enrutador RC.3.

Hay algunos problemas conocidos con las rutas auxiliares, pero hay soporte básico disponible.

Puede definir rutas para mostrar componentes en un nombre <router-outlet>

Configuración de ruta

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

Salida de enrutador con nombre

<router-outlet name="aux">

Navegar por rutas auxiliares

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

Parece que la navegación por rutas auxiliares desde routerLink aún no es compatible

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

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

Todavía no lo he probado

Ver también enrutador Angular2 en un componente

RC.5 routerLink DSL (igual que el createUrlTreeparámetro) https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#createUrlTree-anchor

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

Sí, puedes, como dijo @tomer arriba. Quiero agregar algún punto a la respuesta de @tomer.

• en primer lugar, debe proporcionar el nombre router-outletdonde desea cargar la segunda vista de enrutamiento en su vista. (enrutamiento auxiliar angular2.)

• En el enrutamiento angular2, hay pocos puntos importantes aquí.

  • path o aux (requiere exactamente uno de estos para dar la ruta que debe mostrar como url).
  • componente, cargador, redirectTo (requiere exactamente uno de estos, qué componente desea cargar en el enrutamiento)
  • nombre o como (opcional) (requiere exactamente uno de estos, el nombre que se especifica en el momento de routerLink)
  • datos (opcional, lo que desee enviar con el enrutamiento que debe obtener mediante routerParams en el extremo del receptor).

para obtener más información, lea aquí y aquí.

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

Parece haber otra forma (bastante hacky) de reutilizar la salida del enrutador en una plantilla. Esta respuesta es solo con fines informativos y las técnicas utilizadas aquí probablemente no deberían usarse en producción.

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

La salida del enrutador está envuelta por una plantilla ng. La plantilla se actualiza escuchando los eventos del enrutador. En cada evento, la plantilla se intercambia y se vuelve a intercambiar con un marcador de posición vacío. Sin este "intercambio", la plantilla no se actualizaría.

Sin embargo, este definitivamente no es un enfoque recomendado, ya que el intercambio completo de dos plantillas parece un poco complicado.

en el controlador:

  ngOnInit() {
    this.router.events.subscribe((routerEvent: Event) => {
      console.log(routerEvent);
      this.myTemplateRef = this.trigger;
      setTimeout(() => {
        this.myTemplateRef = this.template;
      }, 0);
    });
  }

en la plantilla:

<div class="would-be-visible-on-mobile-only">
  This would be the mobile-layout with a router-outlet (inside a template): 
  <br>
  <ng-container *ngTemplateOutlet="myTemplateRef"></ng-container>
</div>

<hr>

<div class="would-be-visible-on-desktop-only">
  This would be the desktop-layout with a router-outlet (inside a template): 
  <br>
  <ng-container *ngTemplateOutlet="myTemplateRef"></ng-container>
</div>

<ng-template #template>
    <br>
    This is my counter: {{counter}}
    inside the template, the router-outlet should follow
    <router-outlet>
    </router-outlet>
</ng-template>

<ng-template #trigger>
  template to trigger changes...
</ng-template>

No puede utilizar varias salidas de enrutador en la misma plantilla con la ngIfcondición. Pero puede usarlo de la forma que se muestra a continuación:

<div *ngIf="loading">
  <span>loading true</span>
  <ng-container *ngTemplateOutlet="template"></ng-container>
</div>

<div *ngIf="!loading">
  <span>loading false</span>
  <ng-container *ngTemplateOutlet="template"></ng-container>
  </div>

  <ng-template #template>
    <router-outlet> </router-outlet>
  </ng-template>