aurelia中父/子路由器的活動類句柄

我是aurelia的新手，我在左側有一個主菜單，其中一個菜單（郵件）具有子菜單（收件箱，發送，垃圾箱）。如果子菜單處於活動狀態（＃當前URL，＃活動類，#CSS）需要爲父菜單（郵件）保留活動類，則需要執行此操作。 app.jsaurelia中父/子路由器的活動類句柄

出口類應用{

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>

子菜單URL

<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>

如何設置父類活躍。

來源

2016-08-24 sibi

因爲這些是不同的路線，不是父母+孩子。你應該在父類中描述子路由。您可以將代碼添加到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

來源

2016-09-12 11:37:26

aurelia中父/子路由器的活動類句柄

回答

相關問題