Angular 2 Sub Apps, Eltern / Kind, verschachtelte Komponenten, verschachtelte Router-Outlet, Design / Codierung
Ich habe eine Angular 2 App. Der Hauptbildschirm (App?) Sieht so aus ...
Wenn Sie auf Elemente im oberen Menü routerLinks klicken, werden neue Komponenten in den Hauptansicht-Router-Ausgang geladen. Einer dieser Links lädt ein neues "Admin" -Modul / eine Komponente mit eigenen Routen und einem neuen Router-Ausgang ...
Wenn Sie dann auf die RouterLinks im linken Navigationsbereich klicken, werden neue Admin-Komponenten in den neuen Router-Ausgang geladen.
Aber ...
Angular 2 erlaubt nicht mehr als einen Routerausgang. Wenn Sie also auf einen RouterLink im linken Navigationsbereich klicken, wird einfach die gesamte Ausgangsrouteransicht ersetzt.
Ich habe einige SO-Posts (älter, vielleicht veraltet) bei der Verwendung von "bootstrap" gesehen, um nachfolgende Komponenten zu laden, aber ich kann das nicht zum Laufen bringen. Ich kann nicht einmal import { bootstrap } from 'anywhere at all, nothing works' . Vielleicht ist das nicht der richtige Weg.
Wie kann ich den Admin-Sub-App-Teil zum Funktionieren bringen?
Vielen Dank für Ihre Erfahrungen mit Angular 2: -)
BEARBEITEN: Versuchen vorgeschlagene Lösungen unten. Egal, wo ich die Routen, in der Basis app.routes.ts oder in der Sub-app admin.routes.ts, egal wie ich formatieren Die RouterLinks, ich bekomme diesen Fehler immer wieder ...
BEARBEITEN WIEDER: Hier ist der Code in den Routern und der Vorlage ...
%Vor% BEARBEITEN 3: Versucht, RouterModule.forRoot auf RouterModule.forChild zu ändern, leider gleicher Fehler: - /
EDIT 4: Konvertiertes Routing für die Verwendung von 2 Routing-Modulen. Hoffte vielleicht, dass das einen Unterschied machen würde, aber der selbe Fehler.
Neue Router ...
%Vor%EDIT 5: ES FUNKTIONIERT!
Die Routing-Module wurden entfernt und an die exportierende Routen-Konfiguration nach Tylers Vorschlag zurückgegeben. Er hat Recht, die Routing-Module funktionieren nicht . Tyler hat viel mit mir gearbeitet, also akzeptiere ich seine Antwort. Danke Tyler für deine Hilfe!
Hier können Sie eine Eltern-App mit einem eigenen Router-Outlet einrichten und dann auf dem Eltern-Link auf einen Link klicken, um eine Child-App mit einem eigenen neuen Router-Outlet zu laden. Die untergeordnete App lädt / ersetzt den übergeordneten App-Router-Ausgang.
Es gibt wirklich nichts besonderes im Eltern-App-Modul oder den Routen. Sie sind genau wie ich sie vor diesem Posten hatte.
Die wichtigsten zu beachtenden Punkte , zumindest in meinem Fall heute, nicht verwendet name="" attrib im Child-Router-outlet. Dies wird "Fehler: Kann keine Routen übereinstimmen ..." verursachen. Nicht verwenden Routing-Module wie ich oben versucht habe, dies verursacht auch "Fehler: Kann keine Routen übereinstimmen ...". Nicht verwenden outlet: 'blah' in den Routen, dies verursacht auch "Fehler: Kann keine Routen übereinstimmen ...". Stellen Sie sicher, dass Sie die untergeordnete Route config children: [] genau so eingerichtet haben, wie Sie unten in admin.routes.ts sehen. Beachten Sie auch RouterModule.forChild(router) in den untergeordneten Routen. Diese Dinge haben das Problem für mich heute behoben.
ELTERN APP
%Vor%KINDER APP
%Vor%2 Antworten
Ich bin mir nicht sicher, wo Sie gehört haben, dass Angular2 nicht mehr als 1 router-outlet erlaubt. Ich benutze mehrere in einer großen Anwendung.
Ihre Haupt-app.component hat ein router-outlet , um die Root-Routen zu behandeln. Wenn eine der Routen das Admin-Modul lädt, enthält dieses Admin-Modul die Root-Komponente mit der seitlichen Menüleiste und router-outlet für alle untergeordneten Routen.
Beispiel:
// App.Routen
%Vor% Ihre MainViewComponent kann die obere Navigationsleiste und ein router-outlet enthalten.
Dann kann die Konfiguration des Admin-Routers wie folgt aussehen:
%Vor% Ihre Root-Komponente im Admin-Modul enthält möglicherweise das Seitenleistenmenü und ein router-outlet , um die untergeordneten Komponenten anzuzeigen.
Sie können auch den Namen router-outlets eingeben. Ein Beispiel dafür ist, zwei router-outlet s Seite-an-Seite zu haben:
Ihre Router-Konfiguration würde so aussehen:
%Vor%Und Sie würden es so verwenden:
%Vor%Oder löschen Sie den Inhalt mit:
%Vor%Siehe die Dokumentation oder diese Artikel für weitere Details.
Ich hoffe, das hilft.
Bearbeiten
Wenn Sie die Route-Konfiguration für ein lazy-geladenes Kind verwenden, vergewissern Sie sich, dass Ihre Routen-Konfigurationen in Ihren Modulen richtig geladen sind. Die root route-Konfiguration wird im Stamm-AppModule mit RouterModule.forRoot(routes) geladen und die untergeordneten Routen befinden sich im untergeordneten Modul mit RouterModule.forChild(routes) .
Ihre Routenkonfig und Module müssen so aussehen (erstellen Sie kein separates Modul, nur um die Routing-Konfiguration zu speichern):
// Admin-Routen
%Vor%// Admin-Modul:
%Vor%// App-Routen (Lazy Load Admin-Modul)
%Vor%// App-Modul
%Vor%Ich hoffe, das hilft.
Ja, es gibt einen Weg, dies zu tun. Sie müssen Ihren Router wie folgt benennen:
<router-outlet name="child1"></router-outlet>
<router-outlet name="child2"></router-outlet>
Und in Ihrem Router müssen Sie definieren, welche Router-Outlet-Route verwenden soll:
%Vor%Ursprünglicher Beitrag: Angular2 mehrere Router-Outlet in der gleichen Vorlage
>Tags und Links javascript angular