Ist es möglich, mehrere Router-Steckdosen in derselben Vorlage zu haben?
Wenn ja, wie konfigurieren Sie die Routen?
Ich benutze Angular2 Beta.
angular
angular2-routing
angular2-template
Islam Shaheen
quelle
quelle
Antworten:
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:
In Ihrer Routerkonfiguration:
quelle
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
Fügen Sie Ihrem Router Folgendes hinzu.
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.
quelle
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
Benannter Router-Ausgang
Navigieren Sie durch Aux-Routen
Es scheint, dass das Navigieren auf Aux-Routen von routerLink noch nicht unterstützt wird
Ich habe es noch nicht versucht
Siehe auch
Angular2-Router in einer KomponenteRC.5 routerLink DSL (wie
createUrlTree
Parameter) https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#createUrlTree-anchorquelle
@Input()
Name ist eine Eigenschaft derRouterOutlet
Klasse. Ich muss die Aux Route Path Syntax für routerLink überprüfen.<a [routerLink]="['/team/3', {outlets: {aux: 'chat'}}]">c</a>
<a [routerLink]="[{ outlets: { list:['streams'], details:['parties'] } }]">Link</a>
`
quelle
Ja, Sie können wie von @tomer oben gesagt. Ich möchte @tomer Antwort einen Punkt hinzufügen.
router-outlet
Sie die zweite Routing-Ansicht in Ihre Ansicht laden möchten. (Aux Routing Angular2.)Beim Angular2-Routing gibt es hier nur wenige wichtige Punkte.
Weitere Informationen finden Sie hier und hier.
import {RouteConfig, AuxRoute} from 'angular2/router'; @RouteConfig([ new AuxRoute({path: '/home', component: HomeCmp}) ]) class MyApp {}
quelle
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:
in der Vorlage:
quelle
Sie können nicht mehrere Router-Ausgänge in derselben Vorlage mit
ngIf
Bedingung verwenden. Sie können es jedoch wie folgt verwenden:quelle