複数のAurelia子ルートを使用して<router-view></ router-view>

Question

Aurelia Frameworkを使用して子ルートを実装したいと考えています。

この解決策は、次のリンクmulti-level-menuのようには探していません。以下

コードである：

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; 
    }); 

シナリオ：

page1に移動すると、それぞれの子ルート（1.1ページ、1.2ページ）がそれぞれのページの下に表示されます。

メインメニューの一部であるページ2（子ルートやサブメニューではない）に移動すると、page1.htmlではなくapp.htmlの<router-view></router-view>の下にコンポジション/レンダリングが行われます。

私のDOMには<router-view></router-view>が2つあるので、最近のものが使用されています。

他のページに移動したら、app.htmlの<router-view></router-view>を使用し、DOMからpage1.htmlの他のものを削除する必要があります。

ありがとうございます。

Answer 1

矢印機能を使用している場合は、別に、var _self = this;を実行する必要はありません。

子ルータを使用する場合は、ルータをコンストラクタに注入する必要はありません。configureRouter関数をVMに書き込みます。子ルータが作成され、その機能に渡されます。これは、オーレリア骨格中child-routerに示されている：

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; 
    } 
}