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

Question

[Ivan Stroykin]

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

Такая ситуация, у меня в роутинге в 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']}},
];

Как правильно в компоненте взять содержимое роутинга? Манипуляции с правами и само построение я без проблем сделаю. И вообще такой способ годится?

Answer 1

[Ivan Stroykin]

Не знаю насколько это правильно. Но сделал ))

В общем так...Имеем такой 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 моя директива. Кому интересно, есть у меня в вопросах, там один очень хороший человек помог доработать

Answer 2

[emp1re]

<a *ngIF="someLogic" routerLink="./test1" routerLinkActive="active">Test1</a> // Так же через хостинг делают, если поискать по сайту найдете примеры.

{   path: 'test1', 
        component: test1Component,
        canActivate:[AuthGuardService]  
    },

Comments

[Ivan Stroykin]

Мне менюшку нужно сформировать на основе роутинга. Меню навигации, которую видит пользователь. При этом, в дальнейшем, когда я буду добавлять новые роуты, они автоматически будут добавляться в меню навигации согласно правилам :)

[emp1re]

Иван Стройкин: Не так понял, такого не делал.