我有一个很大的导航,我想将应用程序中的所有链接呈现到它,但我目前只有渲染应用程序路由,所以如何使用任何方法从特定路径获取子路由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>
答案 0 :(得分:1)
我认为您希望route.navigation
代替route.childs
。
答案 1 :(得分:1)
这是我使用的解决方案。当我的路由被分成各自的index.js
文件时,下面的代码将遍历顶级路由,加载每个模型并创建路由层次结构。
它在每个顶级navigation
对象中创建一个新的router.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>
这是从一些博客文章中拼凑而成的,因此我无法引用其中大部分内容的原始来源