Aurelia子ルートを取得

Question

私はアプリケーション内のすべてのリンクをレンダリングしたいが、私は現在アプリケーションルートのみをレンダリングしているので、どのように特定のルートAureliaのどんな方法を使っても？

例：

<li repeat.for="route of router.navigation"> 
    <a href.bind="route.href"> 
     ${route.title} 
    </a> 
    <ul if.bind="route.childs"> 
     <li repeat.for="child of route.childs"> 
      <a href.bind="child.href">${child.title}</a> 
     </li> 
    </ul> 
</li> 

Answer 1

私はあなたがroute.childsの代わりにroute.navigationを希望していると思います。

Answer 2

これは私が使用する解決策です。私のルートが個々のファイルに分割されるので、以下のコードは最上位のルートをループし、各モデルをロードし、ルートの階層を作成します。

トップレベルのrouter.navigationオブジェクトのそれぞれに新しいnavigationプロパティが作成されます。私のトップレベルのルートは、dir/indexモデルを参照しています - これらはすべて、さらにルート設定を含んでいます。これは、ブログの記事の数からつなぎ合わせて、私はできた

app.js

import {inject} from "aurelia-framework"; 
import {Router, RouterConfiguration, RouteConfig, NavModel} from 'aurelia-router'; 
import {CompositionEngine, CompositionContext} from 'aurelia-templating'; 
import {relativeToFile} from 'aurelia-path'; 
import {Origin} from 'aurelia-metadata'; 

@inject(Router, CompositionEngine) 
export class App { 

    environment = ''; 

    constructor(Router, CompositionEngine) { 
     this.router = Router; 
     this.compositionEngine = CompositionEngine; 
    } 

    attached() { 
     return this.mapNavigation(this.router); 
    } 

    configureRouter(config, router) { 
     config.title = 'Aurelia'; 
     config.map([ 
      { route: '', name: 'welcome', moduleId: 'welcome', nav: true, title: 'Welcome' }, 
      { route: 'narrow-dashboard', name: 'narrow-dashboard', moduleId: 'narrow-dashboard/index', nav: true, title: 'Narrow Dashboard' }, 
      { route: 'wide-dashboard', name: 'wide-dashboard', moduleId: 'wide-dashboard/index', nav: true, title: "Wide Dashboard"}, 
      { route: 'examples', name: 'examples', moduleId: 'examples/index', nav: false, title: 'Examples'} 
     ]); 

     this.router = router; 
    } 

    mapNavigation(router: Router, config: RouteConfig) { 
     let promises = []; 
     let c = config ? config : {route: null}; 
     router.navigation.forEach(nav => { 
      if (c.route !== nav.config.route) { 
       promises.push(this.mapNavigationItem(nav, router)); 
      } else { 
       promises.push(Promise.resolve(nav)); 
      } 

     }) 
     return Promise.all(promises) 
    } 

    mapNavigationItem(nav, router) { 
     const config = nav.config; 
     const navModel = nav; 

     if (config.moduleId) { 
      const childContainer = router.container.createChild(); 
      const instruction = { 
       viewModel: relativeToFile(config.moduleId, Origin.get(router.container.viewModel.constructor).moduleId), 
    childContainer: childContainer, 
       view: config.view || config.viewStrategy, 
      }; 
      return this.compositionEngine.ensureViewModel(instruction) 
    .then((context) => { 
       if ('configureRouter' in context.viewModel) { 
        const childRouter = new Router(childContainer, router.history) 
        const childConfig = new RouterConfiguration() 

        context.viewModel.configureRouter(childConfig, childRouter) 
        childConfig.exportToRouter(childRouter) 

        childRouter.navigation.forEach(nav => { 
         nav.href = `${navModel.href}/${nav.config.href ? nav.config.href : nav.config.name}` 
        }) 
        return this.mapNavigation(childRouter, config) 
         .then(r => navModel.navigation = r) 
         .then(() => navModel); 
       } 
       return navModel 
      }) 
     } 
     return Promise.resolve(navModel); 
    } 
} 

のnav-内容でbar.html

 <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
      <ul class="navbar-nav navbar-nav__custom2 mr-auto"> 
       <li repeat.for="row of router.navigation" class="nav-item ${row.isActive ? 'active' : ''}"> 
        <a class="nav-link" href.bind="row.href">${row.title} <span if.bind="row.isActive" class="sr-only">(current)</span></a> 

        <ul class="nav-item__submenu" if.bind="row.navigation.length > 0"> 
         <li repeat.for="subrow of row.navigation" class="nav-item__subitem ${subrow.isActive ? 'active' : ''}"> 
          <a class="nav-link" href.bind="subrow.href">${subrow.title} <span if.bind="subrow.isActive" class="sr-only">(current)</span></a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </nav> 
</template> 

これの多くの部分について元のソースを引用しません