Aurelia Side Navigation With Sub Items

Question

У меня есть приложение Aurelia, и у меня есть тема AdminLTE, работающая с ним. Но я бы хотел использовать боковую навигацию с элементами верхнего уровня, которые расширяют и раскрывают подпункты.

С Aurelia я не уверен, какой подход принять это, потому что привязка к маршруту обеспечивает только 1 уровень навигации. Есть ли способ связать несколько уровней навигации с коллекцией маршрутов?

Например, мой маршрут выглядит следующим образом:

config.map([ 
     { route: ['','welcome'], name: 'welcome',  moduleId: 'welcome',   nav: true, title: 'Welcome',  auth:true, settings: {icon: 'fa fa-home'}}, 
       { route: '/case/',  name: 'case',  moduleId: './case/search', nav: true, title: 'Cases',  auth:true, settings: {icon: 'fa fa-search'}}, 
       { route: '/case/recent', name: 'recent-case', moduleId: './case/recent', nav: true, title: 'Recent Cases', auth:true, settings: {icon: 'fa fa-search'}}, 
       { route: '/analysis', name: 'analysis', moduleId: './analysis/home', nav: true, title: 'Analysis',  auth:true}, 
       { route: '/transfer', name: 'transfer', moduleId: './transfer/home', nav: true, title: 'Transfer',  auth:true}, 
     { route: '/auth/login', name: 'login',  moduleId: './auth/login',  nav: false, title: 'Login'}, 
       { route: '/auth/logout', name: 'logout',  moduleId: './auth/logout', nav: false, title: 'Logout' } 
       ]); 

Я хотел бы мой случай/последний элемент навигации появится под навигацией пункта верхнего уровня «случай» в боковом меню, как это:

Зацикливание элементов в маршрутизаторе в настоящее время только на одном уровне, возможно ли вложенные маршруты поддерживать более одного уровня навигации?

Answer 1

Если вам нужно отобразить вложенные маршруты, вам все равно необходимо, чтобы все маршруты были вложены в конфигурацию маршрутизатора как простой массив. Чтобы показать их как дерево, вы просто подписываетесь на router.navigation и преобразуете его в нужное дерево, используя объект settings так, как вам нравится.

<mytree source.bind="transformToTree(router.navigation)"></mytree>