Angular2 mehrere Router-Outlet in der gleichen Vorlage

Ist es möglich, mehrere Router-Steckdosen in derselben Vorlage zu haben?

Wenn ja, wie konfigurieren Sie die Routen?

Ich benutze Angular2 Beta.

Ja, das können Sie, aber Sie müssen Aux-Routing verwenden. Sie müssen Ihrem Router-Outlet einen Namen geben:

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

und richten Sie Ihre Routenkonfiguration ein:

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

Schauen Sie sich dieses Beispiel an: http://plnkr.co/edit/JsZbuR?p=preview Auch dieses Video: https://www.youtube.com/watch?v=z1NB-HG0ZH4&feature=youtu.be

Das Update für RC.5 Aux-Routen hat sich etwas geändert: Verwenden Sie in Ihrem Router-Outlet einen Namen:

<router-outlet name="aux">

In Ihrer Routerkonfiguration:

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

Sie können mehrere Router-Outlets in derselben Vorlage haben, indem Sie Ihren Router konfigurieren und Ihrem Router-Outlet einen Namen geben. Dies können Sie wie folgt erreichen.

Der Vorteil des folgenden Ansatzes besteht darin, dass Sie eine schmutzig aussehende URL damit vermeiden können. zB: / home (aux: login) etc.

Angenommen, Sie laden appComponent unter Last.

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>

Fügen Sie Ihrem Router Folgendes hinzu.

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

Wenn nun / home geladen wird, wird appComponent mit der zugewiesenen Vorlage geladen, und der Winkelrouter überprüft die Route und lädt die untergeordnete Komponente auf der Grundlage des Namens in den angegebenen Router-Ausgang.

Wie oben können Sie Ihren Router so konfigurieren, dass er mehrere Router-Ausgänge auf derselben Route hat.

Die Syntax der Aux-Routen wurde mit dem neuen RC.3-Router geändert.

Es gibt einige bekannte Probleme mit Aux-Routen, aber grundlegende Unterstützung ist verfügbar.

Sie können Routen definieren, um Komponenten in einem Namen anzuzeigen <router-outlet>

Routenkonfiguration

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

Benannter Router-Ausgang

<router-outlet name="aux">

Navigieren Sie durch Aux-Routen

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

Es scheint, dass das Navigieren auf Aux-Routen von routerLink noch nicht unterstützt wird

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

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

Ich habe es noch nicht versucht

Siehe auch Angular2-Router in einer Komponente

RC.5 routerLink DSL (wie createUrlTreeParameter) 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'
      }
    ]
  }

Ja, Sie können wie von @tomer oben gesagt. Ich möchte @tomer Antwort einen Punkt hinzufügen.

• Zunächst müssen Sie dem Ort einen Namen geben, an dem router-outletSie die zweite Routing-Ansicht in Ihre Ansicht laden möchten. (Aux Routing Angular2.)

• Beim Angular2-Routing gibt es hier nur wenige wichtige Punkte.

  • Pfad oder Aux (erfordert genau einen davon, um den Pfad anzugeben, den Sie als URL anzeigen müssen).
  • component, loader, redirectTo (erfordert genau eine davon, welche Komponente Sie beim Routing laden möchten)
  • name oder as (optional) (erfordert genau einen davon, den Namen, der zum Zeitpunkt von routerLink angegeben wurde)
  • Daten (optional, was auch immer Sie mit dem Routing senden möchten, das Sie mit routerParams auf der Empfängerseite erhalten müssen.)

Weitere Informationen finden Sie hier und hier.

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

Es scheint eine andere (ziemlich hackige) Möglichkeit zu geben, den Router-Ausgang in einer Vorlage wiederzuverwenden. Diese Antwort ist nur zu Informationszwecken gedacht und die hier verwendeten Techniken sollten wahrscheinlich nicht in der Produktion verwendet werden.

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

Der Router-Ausgang wird von einer ng-Vorlage umhüllt. Die Vorlage wird aktualisiert, indem Ereignisse des Routers abgehört werden. Bei jedem Ereignis wird die Vorlage ausgetauscht und mit einem leeren Platzhalter erneut ausgetauscht. Ohne dieses "Austauschen" würde die Vorlage nicht aktualisiert.

Dies ist jedoch definitiv kein empfohlener Ansatz, da das gesamte Austauschen von zwei Vorlagen etwas hackig erscheint.

in der Steuerung:

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

in der Vorlage:

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

Sie können nicht mehrere Router-Ausgänge in derselben Vorlage mit ngIfBedingung verwenden. Sie können es jedoch wie folgt verwenden:

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