Aurelia：创建嵌套/多级导航菜单的简单方法

Question

我需要创建一个多级导航菜单。 菜单内容因用户而异。 我计划通过一项将数据作为 JSON 返回的服务来拉取可以包含子项数组的导航项集合。 我见过的每个导航/路由示例都使用静态路由或单级菜单。 我已经阅读了一些关于子路由的内容，但这似乎不是我需要的。 我唯一能想到的是创建一个自定义导航元素，该元素的模型将使用导航项集合中的数据在普通数组中注册路由。 然后我会使用这个集合来呈现 HTML，而不是使用路由器，因为它包含层次结构信息。 有没有更简单的方法来做到这一点。 这是我使用过的第一个 JS 框架，所以我正在努力加快速度。

Answer 1

实际上，这相当容易。 您只需向路由的settings对象添加一个属性。 您可以随意命名。 它将包含子菜单的菜单项集合。 只需使用它来构建子菜单。

这是一个例子： https : //gist.run?id=beb5ba9155fdb2ccefcf78676879b1ca

应用程序.html

<template>
  <ul>
    <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
      <a href.bind="row.href">${row.title}</a>
      <ul>
        <li repeat.for="sub of row.settings.subRoutes">
          <a route-href="route.bind: row.config.name; params.bind: sub.params">${sub.name}</a>
        </li>
      </ul>
    </li>
  </ul>

  <div class="page-host">
    <router-view></router-view>
  </div>
</template>

应用程序.js

import {activationStrategy} from 'aurelia-router';

export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map([
      { 
        route: ['', 'one'], 
        name: 'one',      
        moduleId: 'one',      
        nav: true, 
        title: 'Page 1',
        activationStrategy: activationStrategy.invokeLifecycle,
        settings: {
          subRoutes: [
            {
              name: 'Sub-choice 1',
              params: {
                'foo': 'bar'
              }
            },
            {
              name: 'Sub-choice 2',
              params: {
                'foo': 'two'
              }
            }
          ]
        }
      },
      { route: 'two',         name: 'two',        moduleId: 'two',        nav: true, title: 'Page 2' }
    ]);

    this.router = router;
  } 
}

一个.html

<template>
  Page One<br />
  Params:<br />
  <pre><code>${params}</code></pre>
</template>

一个.js

export class One {
  activate(params) {
    this.params = JSON.stringify(params);
  }
}

你传递的参数可以是任何你喜欢的。 例如，它们可以是关于应该在您要去的路由上的子路由器上激活什么路由的信息。 您可以在页面的 activate 方法（下面示例中的one.js中调用router.navigate...以导航到子路由器上的正确路由。 你真的可以为所欲为，因为你可以把任何你喜欢的旧东西放在那个设置对象上。

Answer 2

我已经通过以下方式解决了类似的问题：

1. 我从服务器检索了简单的导航树
2. 然后我走树并将所有导航项转换为 aurelia 路由，实际上将树扁平化为数组，因此每个路由都将具有如下设置属性： {id: 2, parentId: 1, level: 1}在那一刻
3. 然后我通过该扁平阵列config.map()并使用从物品一个新的树对象router.navigation （记住：我保存的id和parentId在settings ）上router.ensureConfigured().then(_ => {createNavTree(router.navigation)})
4. 使用createNavTree(...)输出来呈现列表项。 （ level仅用于某些样式）
5. 所以一般我创建平面router.navigation数组并使用它的项目来创建自己的树结构来呈现导航

此外，当使用注入的ObserverLocator导航子项时，我还会监听router.currentInstruction中的更改以跟踪菜单折叠。

`import {ObserverLocator} from 'aurelia-framework';`
...
this.routerCurrentInstructionSub = this.observerLocator
  .getObserver(router, 'currentInstruction')
  .subscribe((newValue, oldValue) => { ... });

注意订阅应该在不需要时释放以避免内存泄漏this.routerCurrentInstructionSub.dispose();

此解决方案的主要好处是您可以获得功能齐全的路线，因此您可以在导航时将树子项呈现为活动状态。

它也不限制子项使用子路由器。