Aurelia Child Route mit mehreren <router-view></ router-view>

Question

Ich möchte Kind Routen mit Aurelia Framework implementieren.

Ich suche nicht nach dieser Lösung, wie im folgenden Link gezeigt, multi-level-menu.

Unten ist der Code:

app.html

<div class="page-host"> 
    <router-view></router-view> 
</div> 

app.js/app.ts

var _self = this; 
this.router.configure(config => { 
     config.map(this.routes); 
     config.mapUnknownRoutes(instruction => { 
     _self.router.navigate(_self.defaultRoute); 
      return ''; 
     }); 

     this.router = router; 
     this.sideNavObj.navigationRouteList = this.router.navigation; 
     return config; 
    }); 

page1.html

<section> 
    <h2>Child Routes</h2> 
    <div> 
     <div class="col-md-2"> 
      <ul class="well nav nav-pills nav-stacked"> 
       <li repeat.for="row of childRoutes"> 
        <span click.delegate="router.navigate('#/' + row.route)">${row.title}</span> 
       </li> 
      </ul> 
     </div> 
     <div class="col-md-10 childRouterDiv"> 
      <router-view></router-view> 
     </div> 
    </div> 
</section> 

page1.js/page.ts

var _self = this; 
this._router.configure(config => { 
     config.map(_self.childRoutes); 
     return config; 
    }); 

Szenario:

Sobald Sie zu Seite1 navigieren, kommen die entsprechenden untergeordneten Routen (Seite 1.1, Seite 1.2) unter die entsprechende Seite.

Wenn Sie jedoch zu Seite2 navigieren, die Teil des Hauptmenüs ist (keine untergeordnete Route oder Untermenü), findet die Komposition/Wiedergabe unter der <router-view></router-view> von page1.html not app.html statt.

Da es zwei <router-view></router-view> in meinem DOM gibt, wird der neueste verwendet.

Sobald ich zu anderen Seite (n) navigieren <router-view></router-view> von app.html sollte verwendet werden und andere (von page1.html) sollte aus dem DOM entfernt werden.

Vielen Dank im Voraus.

Answer 1

Nebenbei müssen Sie var _self = this; nicht tun, wenn Sie Pfeilfunktionen verwenden.

Wenn Sie einen untergeordneten Router haben möchten, haben Sie nicht den Router in den Konstruktor injiziert, Sie schreiben eine configureRouter Funktion auf Ihrer VM. Der untergeordnete Router wird für Sie erstellt und an diese Funktion übergeben. Dies ist in child-router im Aurelia Skelett gezeigt:

import {Router, RouterConfiguration} from 'aurelia-router' 

export class ChildRouter { 
    heading = 'Child Router'; 
    router: Router; 

    configureRouter(config: RouterConfiguration, router: Router) { 
    config.map([ 
     { route: ['', 'welcome'], name: 'welcome',  moduleId: 'welcome',  nav: true, title: 'Welcome' }, 
     { route: 'users',   name: 'users',   moduleId: 'users',   nav: true, title: 'Github Users' }, 
     { route: 'child-router', name: 'child-router', moduleId: 'child-router', nav: true, title: 'Child Router' } 
    ]); 

    this.router = router; 
    } 
}