Question

我是aurelia的新手，我在左侧有一个主菜单，其中一个菜单（邮件）有子菜单（收件箱，已发送，垃圾）。如果子菜单处于活动状态（＃current URL，＃activeclass，＃CSS）需要保持父菜单（邮件）的活动类，我需要这样做。的 app.js

导出类App {

configureRouter(config, router){
    config.title = 'DMS';

    config.map([
        { route: ['dashboard',''],  name: 'Dashboard',
            moduleId: './templates/dashboard/dashboard',  nav: true, title:'Dashboard',settings:{'img' : 'ic-dashboard.png'} },
        { route: ['settings'],  name: 'Settings',
            moduleId: './templates/settings/settings',  nav: true, title:'Settings' ,settings:{'icon' : 'settings'} },
        { route: ['inbox'],  name: 'inbox',
            moduleId: './templates/mail/inbox/inbox',  nav: true, title:'Mail' ,settings:{'img' : 'mail.png'} },
        { route: ['inbox/trash'],  name: 'trash',
            moduleId: './templates/mail/trash/trash', title:'Mail' },
        { route: ['inbox/sent'],  name: 'sent',
            moduleId: './templates/mail/sent/sent', title:'Mail'},
    ]);

    this.router = router;
}
}

菜单列表也应用了有效课程

<div class="row col s12 ${row.isActive ? 'active' : ''}" repeat.for = "row of router.navigation" >
        <a href.bind = "row.href">
        <div class="col s2 " >
            <div if.bind="row.settings.img">
                <img src="src/assets/${row.settings.img}">
            </div>
            <div if.bind="row.settings.icon">
                <i class="tiny material-icons">${row.settings.icon}</i>
            </div>
        </div>
        </a>
    </div>

子菜单网址

  <div class="col s8 offset-s2 mail_actionLst">
                    <ul>
                        <li class="inbox mail_active"><a href="#/inbox"> Inbox &nbsp; <span>(43)</span></a> </li>
                        <li class="sent"><a href="#/inbox/sent">Sent</a> </li>
                        <li class="trash"><a href="#/inbox/trash">Trash</a></li>
                    </ul>
                </div>

如何将父类设置为活动状态。

Answer 1

因为这些是不同的路线，而不是父母+孩子。您应该在父类中描述子路由。您可以将代码添加到inbox.js

 configureRouter(config, router){

    config.map([
        { route: ['trash'],  name: 'trash',
            moduleId: 'path_to_trash', title:'Mail' },
        { route: ['sent'],  name: 'sent',
            moduleId: 'path_to_sent', title:'Mail'},
    ]);

    this.router = router;
   }

别忘了添加

    <router-view></router-view>

到inbox.html

aurelia中父/子路由器的活动类句柄

1 个答案: