Angular2 mehrere Router-Outlet in der gleichen Vorlage

81

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

Wenn ja, wie konfigurieren Sie die Routen?

Ich benutze Angular2 Beta.

Islam Shaheen
quelle
Was möchten Sie genau implementieren? Könnten Unterrouten Ihren Anforderungen entsprechen? Siehe diesen Link: angle.io/docs/ts/latest/guide/router.html#!#child-router .
Thierry Templier
Ich muss eine Anwendung erstellen, die mehrere Sitzungen (Registerkarten) verwendet. Jede Sitzung hat den gleichen Inhalt (wie die Browser-Registerkarten).
Islam Shaheen
Überprüfen Sie das Gespräch des Entwicklers des Routers, um zu sehen, was derzeit möglich ist -> youtube.com/watch?v=z1NB-HG0ZH4 WENN ich mich gut erinnere, gibt es untergeordnete Routen und Hilfsrouten.
Angular University

Antworten:

55

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'}
Tomer Almog
quelle
1
Übrigens, ab Januar 2016 sollten wir laut dieser Ressource noch kein Aux verwenden, da es noch nicht fertig ist. github.com/angular/angular/issues/5027#issuecomment-169464546
Tomer Almog
danke für die antwort, ich benutze angular2 beta. Ich habe versucht, die Aux-Route zu definieren: {Aux: '/ edit-entity /: id', Name: 'EditEntity', Komponente: EditEntityComponent}, wenn ich es aufrufe, funktioniert es nicht: this._router.navigate (['/' , ['EditEntity'], {id: id}]);
Islam Shaheen
Stellen Sie sicher, dass Sie die vollständige Route in den Navigationsbereich aufnehmen, nicht relativ zu Ihrer Komponente.
Tomer Almog
4
Update: Ab Mai 2016 hat Angular2 gerade seinen RC (Release Candidate) veröffentlicht und jetzt sollen Aux-Routen funktionieren.
Tomer Almog
3
1 Stimme für Update-Antwort auf RC5. Angular2 ändert sich so schnell.
Teddy
46

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.

Jigar Gala
quelle
19

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

Günter Zöchbauer
quelle
Soll das in RC5 funktionieren? Ich habe es nicht geschafft, es zum Laufen zu bringen. Wenn ich mir den Quellcode für den Router ansehe, kann ich auch keinen "@Input () - Namen" finden.
Kungen
@Input()Name ist eine Eigenschaft der RouterOutletKlasse. Ich muss die Aux Route Path Syntax für routerLink überprüfen.
Günter Zöchbauer
Die aktuelle Syntax scheint zu sein<a [routerLink]="['/team/3', {outlets: {aux: 'chat'}}]">c</a>
Günter Zöchbauer
Bitte schauen Sie sich diese Frage an und sehen Sie, ob Sie es schaffen, mir zu helfen. stackoverflow.com/questions/39142396/…
Kungen
@ GünterZöchbauer Nachdem ich mir Ihre Antwort angesehen habe - ich glaube, ich vermisse etwas - ist es möglich, AUX-Routen zu entfernen, nachdem Sie sie über routerLink besucht haben? (nicht per Code). Ich habe Ihre Antwort in diesem einfachen plnkr ohne Erfolg versucht. Die Aux-Route wird einfach nicht wieder entfernt
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'
      }
    ]
  }
Tomiwa Adefokun
quelle
3

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 {}
Pardeep Jain
quelle
3
Ihre beiden Links sind defekt.
Ceebreenk
0

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>
Tobias Gassmann
quelle
0

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