Aurelia获取儿童路线

我有一个很大的导航，我想呈现应用程序中的所有链接到它，但我目前我只呈现应用程序路由，所以我怎么能从特定路线获取子路线使用奥里利亚的任何方法？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>

来源

2017-07-26 Ahmed Saber

我觉得你代替route.childs希望route.navigation。

来源

2017-07-26 19:28:26 TylerJPresley

路线导航已经在第一个循环中，我问如何让孩子的当前路线？我写的孩子只是一个例子，它不是真的:) –

我认为他们是同一类型。所以孩子们会像父母一样进行导航。 – TylerJPresley

这是我使用的解决方案。由于我的路线被拆分为各自的index.js文件 - 下面的代码将遍历顶层路线，加载每个模型并创建路线层次结构。

它在每个顶级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>

这是从一些博客文章拼凑起来的，这样我就可以这里没有引用原始资料

来源

2017-07-27 09:37:10 Tom

Aurelia获取儿童路线

回答

相关问题