example - router.navigate angular 5

Salida de enrutador múltiple Angular2 en la misma plantilla

Question

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

En caso afirmativo, ¿cómo configurar las rutas?

Estoy usando angular2 beta.

Answer 1

La sintaxis de 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 <router-outlet> llamado

Configuración de ruta

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

Enrutador designado

<router-outlet name="aux">

Navegar por rutas auxiliares

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

Parece que todavía no se admite la navegación de rutas auxiliares desde routerLink

<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 parámetro createUrlTree ) https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#createUrlTree-anchor

Answer 2

Parece que hay otra forma (bastante hacky) de reutilizar la salida del enrutador en una plantilla:

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

La salida del enrutador está envuelta por una plantilla ng. La plantilla se actualiza al escuchar 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 no parece ser un enfoque recomendado, ya que el intercambio completo de dos plantillas parece un poco extraño.

Answer 3

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 la URL de aspecto sucio con él. por ejemplo: / home (aux: login) etc.

Suponiendo que durante 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 seguimiento 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 especificado en función del nombre.

Al igual que arriba, puede configurar su enrutador para que tenga múltiples salidas de enrutador en la misma ruta.

Answer 4

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

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

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

  • ruta o auxiliar (requiere exactamente uno de estos para dar la ruta que debe mostrar como la 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 especifica en el momento de routerLink)
  • datos (opcional, lo que quiera enviar con el enrutamiento que debe obtener usando routerParams en el extremo del receptor).

Para más información, lea here y here.

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

Answer 5

Sí, puedes, pero necesitas usar enrutamiento auxiliar. Deberá asignar un nombre a la salida de su enrutador:

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

y configure su configuración de 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''}

Answer 6

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