Aurelia 获取子路线

Question

我有一个很大的导航，我想将应用程序中的所有链接呈现到其中，但我目前只呈现应用程序路由，所以我如何使用任何方法从特定路由获取子路由奥蕾莉亚？

前：

<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.navigation 代替 route.childs。

Answer 2

这是我使用的解决方案。由于我的路线被拆分为各自的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);
    }
}

导航栏.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>

这是从许多博客文章中拼凑而成的，因此我无法引用原始出处