Angular2 enrutador-salida múltiple en la misma plantilla


81

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

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

Estoy usando angular2 beta.


¿Qué es exactamente lo que quiere implementar? ¿Podrían las rutas secundarias satisfacer sus necesidades? Vea este enlace: angular.io/docs/ts/latest/guide/router.html#!#child-router .
Thierry Templier

Necesito crear una aplicación que use múltiples sesiones (pestañas), cada sesión tiene el mismo contenido (como las pestañas del navegador).
Islam Shaheen

verifique la charla del desarrollador del enrutador, para ver qué es posible actualmente -> youtube.com/watch?v=z1NB-HG0ZH4 SI recuerdo bien que hay rutas secundarias y rutas auxiliares.
Angular University

Respuestas:


55

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

1
por cierto, a partir de enero de 2016, según este recurso, no deberíamos usar aux todavía, ya que no está listo github.com/angular/angular/issues/5027#issuecomment-169464546
Tomer Almog

gracias por la respuesta, estoy usando angular2 beta. Traté de definir la ruta auxiliar: {aux: '/ edit-entity /: id', nombre: 'EditEntity', component: EditEntityComponent} cuando llamo no funciona: this._router.navigate (['/' , ['EditEntity'], {id: id}]);
Islam Shaheen

asegúrese de incluir la ruta completa en la sección de navegación, no en relación con su componente.
Tomer Almog

4
Actualización: a partir de mayo de 2016, Angular2 acaba de lanzar su RC (candidato de lanzamiento) y ahora se supone que las rutas auxiliares funcionan.
Tomer Almog

3
1 voto para actualizar la respuesta a RC5. Angular2 cambia tan rápido.
peluche

46

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.


19

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


¿Se supone que esto funciona en RC5? No he conseguido que funcione. Mirando el código fuente del enrutador tampoco puedo encontrar ningún "nombre @Input ()".
Kungen

@Input()nombre es una propiedad de la RouterOutletclase. Tengo que verificar la sintaxis de la ruta de ruta auxiliar para routerLink.
Günter Zöchbauer

La sintaxis actual parece ser<a [routerLink]="['/team/3', {outlets: {aux: 'chat'}}]">c</a>
Günter Zöchbauer

Por favor, mire esta pregunta y vea si logra ayudarme. stackoverflow.com/questions/39142396/…
Kungen

@ GünterZöchbauer Después de ver su respuesta, creo que me falta algo, ¿es posible eliminar las rutas AUX después de visitarlas a través de routerLink? (no por código). Probé tu respuesta en este sencillo plnkr sin éxito. La ruta auxiliar simplemente no se moverá
Royi Namir

16

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

3

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

3
Ambos enlaces están rotos.
ceebreenk

0

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>

0

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>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.