Ivan Stroykin2017-01-31 17:04:52
Ivan Stroykin, 2017-01-31 17:04:52

Angular2: Is it possible to generate a navigation menu based on routing?

Good day,
Such a situation, in my routing in data roles are registered (the roles of users who can access this page)
Everything works fine, but I ran into a question about the navigation menu. For now, it's static. Is it possible to form a navigation menu directly on the basis of routing?
For example, this routing:

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']}},

How to take the contents of the routing in the component? I will do the manipulations with the rights and the construction itself without any problems. And is this method good at all?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
Ivan Stroykin, 2017-01-31

I don't know how correct this is. But I did))
In general, like this ... We have such a routing (naturally invented):

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']}},

Next is the navigation component:
menuNavigation = [];
routing: Array<Object>;

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

ngOnInit() {

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']) {
                 url: parentUrl + '/' + nav['path'],
                 title: nav['data']['title'],
                 roles: nav['data']['roles'],

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

hasRole is my directive. Who cares, I have questions, there one very good person helped to finalize

emp1re, 2017-01-31

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

{   path: 'test1', 
        component: test1Component,

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question