aureliaの親/子ルータのアクティブクラスのハンドル

Question

aureliaの新機能です。左側にメインメニューがあり、メニュー（メール）の1つにサブメニュー（受信トレイ、送信済み、ゴミ箱）があります。サブメニューがアクティブな場合（#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> 

サブメニューの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> 

0親クラスがアクティブに設定する方法

。

Answer 1

これらは異なるルートであり、親と子ではないためです。 親ルートに子ルートを記述する必要があります。あなたはいけない

をinbox.htmlする

<router-view></router-view> 

を追加することを忘れ

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

をinbox.jsするコードを追加することができます