Aurelia: Kind Router Routen Anzeige in "Haupt" Navigationsleiste und Kind in app.html anzeigen <router-view> Element?

Question

Wir wollen ein Sidebar-Menü und einen "Haupt" -Bereich haben. Je nachdem, wie Sie navigieren, ändern sich die Menüelemente der Seitenleiste und eine neue Ansicht wird in den Hauptbereich geladen.

Ich habe app.html mit einem <router-view> Element erstellt, und eine nav-bar.html, die die Navigation des Haupt-Routers anzeigen kann. Nehmen wir an, ich habe zunächst "Administration" und "Reports" als Routen (und damit Menüpunkte). Wenn ein Benutzer auf "Administration" klickt, möchte ich, dass das Menü aktualisiert wird, um untergeordnete Routen anzuzeigen (z. B. "Benutzer" und "Einstellungen") und dass das Admin-Ansichtsmodell in der App-Version <router-view> angezeigt wird.

Zunächst habe ich versucht, einen Kind-Router zu erstellen, aber dann muss ich eine neue <router-view> innerhalb von admin.html haben (die Seite wird nicht einmal ohne diese geladen). Stattdessen möchte ich, dass die Ansicht admin.html innerhalb der <router-view> app.html angezeigt wird und dass die untergeordneten Routen die "Haupt" -Routen im Navigationsleistenmenü ersetzen.

In app.js ich habe folgende Router config:

this.router.configure((config) => { 
    config.title = "Welcome"; 
    config.map([ 
     { route: "", moduleId: "welcom", nav: false, title: "Welcome" }, 
     { route: "reports", moduleId: "reports", nav: true, title: "Reports" }, 
     { route: "admin", moduleId: "users", nav: true, title: "Administration" }, 
    ]); 
}); 

In users.js habe ich diesen Code:

this.router.configure((config) => { 
    config.title = "Users"; 
    config.map([ 
     { route: "", moduleId: "users", nav: true, title: "Users" }, 
     { route: "settings", moduleId: "settings", nav: true, title: "Settings" }, 
    ]); 
}); 

Zunächst sollte das Menü sein:
- Verwaltung
- Berichte

und "welcome.html" sollte die Ansicht in dersein 210 (die Standardroute ist "Willkommen").

Wenn der Benutzer klickt (navigiert zu) "Administration", sollte das Menü aktualisieren:
- Benutzer - Einstellungen

mit "users.html" im <router-view>.

Um dies überhaupt zum Funktionieren zu bringen, brauche ich eine weitere <router-view> in "users.html" und das ist nicht wirklich was ich will (ich möchte, dass die Ansicht in die app.html <router-view> geladen wird).

Gibt es einen Weg, dies in Aurelia zu erreichen? Ich habe sogar versucht, den übergeordneten Router in den Admin-Konstruktor zu injizieren (mit Parent.of(router) Bindung) und dann router.addRoute(). Die Route wird hinzugefügt, aber das Menü wird nicht aktualisiert (obwohl es datengebunden ist).

Answer 1

Ich habe ein Beispiel mit Aurelia erstellt, das eine hierarchische Menüstruktur mithilfe eines Menüs auf der linken Seite implementiert.

Hier sind notes about the sample project

Sie können run the sample online es testen

Das Multi-Level-Menü-Beispiel zeigt, wie Sie schnell ein hierarchisches Menü erstellen können, wenn eine Website Aurelia SPA Gebäude.

Das mehrstufige Menü hilft Benutzern beim Navigieren durch eine Seitenhierarchie.

Es ist leicht, die Routen und die Hierarchie zu konfigurieren, wie unten dargestellt:

import aur = require("aurelia-router"); 
import mlmps = require("./MultiLevelMenuPipelineStep"); 

export class App { 
    static inject = [aur.Router]; 

    constructor(public router: aur.Router) { 
     this.router.configure((config) => { 
      config.title = "Aurelia VS/TS"; 
      config.addPipelineStep("modelbind", mlmps.MultiLevelMenuPipelineStep); 
      config.map([ 
       { route: ["", "home"], moduleId: "views/home", nav: true, title: "home", settings: { level: 0, show: true } }, 
       { route: ["item-1"], moduleId: "views/item-1", nav: true, title: "item 1", settings: { level: 0, show: true } }, 
       { route: ["item-1-1"], moduleId: "views/item-1-1", nav: true, title: "item 1.1", settings: { level: 1, show: false } }, 
       { route: ["item-1-2"], moduleId: "views/item-1-2", nav: true, title: "item 1.2", settings: { level: 1, show: false } }, 
       { route: ["item-2"], moduleId: "views/item-2", nav: true, title: "item 2", settings: { level: 0, show: true } }, 
       { route: ["item-2-1"], moduleId: "views/item-2-1", nav: true, title: "item 2.1", settings: { level: 1, show: false } }, 
       { route: ["item-2-2"], moduleId: "views/item-2-2", nav: true, title: "item 2.2", settings: { level: 1, show: false } }, 
       { route: ["item-2-2-1"], moduleId: "views/item-2-2-1", nav: true, title: "item 2.2.1", settings: { level: 2, show: false } }, 
       { route: ["item-2-2-2"], moduleId: "views/item-2-2-2", nav: true, title: "item 2.2.2", settings: { level: 2, show: false } }, 
       { route: ["item-2-3"], moduleId: "views/item-2-3", nav: true, title: "item 2.3", settings: { level: 1, show: false } } 
      ]); 
     }); 
    } 
} 

Die level Eigenschaft verwendet wird, um die Hierarchie zu etablieren. Die Eigenschaft show steuert die Sichtbarkeit der Route im Menü. Der Router-Navigationspipeline-Schritt betrachtet die Zielnavigation und legt die Routensichtbarkeit entsprechend fest. Der Navigationshelfer stellt eine Schaltfläche bereit, um eine Ebene von der aktuellen Route aufwärts zu navigieren, und ruft den entsprechenden Navigationsbefehl für den Router auf.