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獲取兒童路線

回答

相關問題