Aurelia：如何使用一些下拉菜单项构建主菜单答案

【问题标题】：Aurelia: How to build a main menu with some dropdown menu itemsAurelia：如何使用一些下拉菜单项构建主菜单
【发布时间】：2017-05-21 05:37:08
【问题描述】：

我是 aurelia 框架的新手。我尝试构建一个包含 7 个项目的主菜单。前 4 项应为顶部菜单项，最后 3 项应为下拉菜单项。我使用引导程序 3。

app.ts 中的路由器配置如下：

config.map([
  { route: ['', 'Buchungen'],
    name: 'Buchungen',
    moduleId: './buchung/app-buchung',
    nav: true, title: 'Buchungen',
    settings: {img:'./img/ic_tab_buchungen_white.png',t:'main_Buchungen',class:'fa fa-money'}},
  { route: 'Konten',
    name: 'Konten',
    moduleId: './konto/app-konto',
    nav: true,
    title: 'Konten',
    settings: {img:'./img/ic_tab_konto_white.gif',t:'main_Konten',class:'fa fa-university' }},
  { route: 'Bilanz',
    name: 'Bilanz',
    moduleId: './bilanz/app-bilanz',
    nav: true,
    title: 'Bilanz',
    settings: {img:'./img/ic_tab_bilanz_white.gif',t:'main_Bilanz',class:'fa fa-balance-scale'} },
  { route: 'Erfolg',
    name: 'Erfolg',
    moduleId: './erfolg/app-erfolg',
    nav: true,
    title: 'Erfolg',
    settings: {img:'./img/ic_tab_erfolg_white.gif',t:'main_Erfolg',class:'fa fa-line-chart'} },
  { route: 'Chart',
    name: 'Chart',
    moduleId: './child-router',
    nav: true,
    title: 'Chart',
    settings: {img:'./img/chart_line32.png',t:'menu_chart',class:'fa fa-area-chart'} },
  { route: 'export',
    name: 'export',
    moduleId: './child-router',
    nav: true,
    title: 'export',
    settings: {img:'./img/ic_menu_export.png',t:'menu_export', class:'glyphicon glyphicon-log-out'}},
  { route: 'option',
    name: 'option',
    moduleId: './child-router',
    nav: true,
    title: 'option',
    settings: {img:'./img/ic_menu_export.png',t:'menu_option', class:'glyphicon glyphicon-option-horizontal'}}
]);

nav-bar.html 看起来像：

<div class="collapse navbar-collapse" id="aaccounting-navigation-navbar-collapse">
    <ul class="nav navbar-nav">
      <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
        <a data-toggle="collapse" data-target="#aaccounting-navigation-navbar-collapse.in" href.bind="row.href" >
          <i class="${row.settings.class}" aria-hidden="true"></i>
          <span t.bind="row.settings.t">${row.title}</span>
        </a>
      </li>

在上面的 html 中会有 7 个菜单项，但我喜欢将下拉菜单设置为：

<li>
        <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
        </ul>

      </li>

我怎样才能用 aurelia 做到这一点？

【问题讨论】：

标签： twitter-bootstrap aurelia

【解决方案1】：

也许这个答案对你有帮助：https://stackoverflow.com/a/38444441/4921289

他的建议是向您的路由配置设置属性（您已经做过的）添加属性，以区分下拉条目或主条目。

【讨论】：

是的，这就是解决方案（configRouter 方法）。谢谢。