StivinKing
@StivinKing

Angular2: Можно ли на основании роутинга сформировать меню навигации?

Доброго времени суток,

Такая ситуация, у меня в роутинге в data прописаны roles (роли пользователей, которые могут зайти на эту страницу)
Всё отлично работает, но столкнулся с вопросом по меню навигации. Пока что оно прописано статично. Можно ли прямо на основании роутинга сформировать меню навигации?

К примеру такой роутинг:
export const routes: Routes = [
  {path: 'test1', component: Test1Component, data: {title: 'Тест 1', role: ['admin', 'user']}},
  {path: 'test2', component: Test2Component, data: {title: 'Тест 2' role: ['admin']}},
  {path: 'test3', component: Test3Component, data: {title: 'Тест 3' role: ['admin', 'user']}},
  {path: 'test4', component: Test4Component, data: {title: 'Тест 4' role: ['admin']}},
];


Как правильно в компоненте взять содержимое роутинга? Манипуляции с правами и само построение я без проблем сделаю. И вообще такой способ годится?
  • Вопрос задан
  • 216 просмотров
Решения вопроса 1
StivinKing
@StivinKing Автор вопроса
Не знаю насколько это правильно. Но сделал ))

В общем так...Имеем такой routing (естественно выдуманный):
export const routes: Routes = [
  {path: 'test1', component: Test1Component, data: {title: 'Тест 1', roles: ['admin', 'user']}},
  {path: 'test2', component: Test2Component, children: [
    {path: 'test5', component: Test5Component, data: {title: 'Тест 5', roles: ['admin', 'user'}},
    {path: 'test6', component: Test6Component, data: {title: 'Тест 6', roles: ['admin'}},
  ]},
  {path: 'test3', component: Test3Component, data: {title: 'Тест 3' roles: ['admin', 'user']}},
  {path: 'test4', component: Test4Component, data: {title: 'Тест 4' roles: ['admin']}},
];

Далее есть компонент навигации:
menuNavigation = [];
routing: Array<Object>;

constructor(private router: Router) {
     this.routing = router.config;
}

ngOnInit() {
     this.buildMenuNavigation(this.routing);
}

buildMenuNavigation(navigation: Array<Object>, parentUrl: string = ''): void {
     for (let nav of navigation) {
         // Если есть дочерние пункты, прогоняем еще раз
         if (nav['children']) {
            let newParentUrl = '/' + nav['path'];
             this.buildMenuNavigation(nav['children'], newParentUrl);
         }

         // Добавляем пункты в которых есть 'data: {}'
         if (!nav['children'] && nav['data']) {
             this.menuNavigation.push({
                 url: parentUrl + '/' + nav['path'],
                 title: nav['data']['title'],
                 roles: nav['data']['roles'],
             });
         }
     }
 }

И вид:
<ng-container *ngFor="let nav of menuNavigation">
     <template [hasRole]="nav.roles">
          <li routerLinkActive="active">
               <a [routerLink]="nav.url"><span>{{nav.title}}</span></a>
          </li>
     </template>
</ng-container>


hasRole моя директива. Кому интересно, есть у меня в вопросах, там один очень хороший человек помог доработать
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@emp1re
<a *ngIF="someLogic" routerLink="./test1" routerLinkActive="active">Test1</a> // Так же через хостинг делают, если поискать по сайту найдете примеры.

{   path: 'test1', 
        component: test1Component,
        canActivate:[AuthGuardService]  
    },
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы