Angular2: is it Possible on the basis of the routing form navigation menu?

Good day,

This situation, in my routing in data prescribed roles (the user roles that can access this page)
Everything works fine, but faced with a question on the navigation menu. Yet it is written statically. Is it possible directly on the basis of the routing form navigation menu?

For example, such a routing:
export const routes: Routes = [
 {path: 'test1', component: Test1Component, data: {title: 'Test 1', role: ['admin', 'user']}},
 {path: 'test2', component: Test2Component, data: {title: 'Test 2' role: ['admin']}},
 {path: 'test3', component: Test3Component, data: {title: 'Test 3' role: ['admin', 'user']}},
 {path: 'test4', component: Test4Component, data: {title: 'Test 4' role: ['admin']}},
];


How in your component to take the contents of the routing? The manipulation of rights and the very structure I have no problem to do. In General, such a method is suitable?
August 19th 19 at 22:49
2 answers
August 19th 19 at 22:51
Solution
Don't know if this is correct. But done ))

Anyway...Have a routing (of course fictional):
export const routes: Routes = [
 {path: 'test1', component: Test1Component, data: {title: 'Test 1', roles: ['admin', 'user']}},
 {path: 'test2', component: Test2Component, children: [
 {path: 'test5', component: Test5Component, data: {title: 'Test 5', roles: ['admin', 'user'}},
 {path: 'test6', component: Test6Component, data: {title: 'Test 6', roles: ['admin'}},
]},
 {path: 'test3', component: Test3Component, data: {title: 'Test 3' roles: ['admin', 'user']}},
 {path: 'test4', component: Test4Component, data: {title: 'Test 4' roles: ['admin']}},
];

Then there is a component navigation:
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 has child items, run it again
 if (nav['children']) {
 let newParentUrl = '/' + nav['path'];
 this.buildMenuNavigation(nav['children'], newParentUrl);
}

 // Add items which are 'data': {}'
 if (!nav['children'] && nav['data']) {
this.menuNavigation.push({
 url: parentUrl + '/' + nav['path'],
 title: nav['data']['title'],
 roles: nav['data']['roles'],
});
}
}
}<br>
And the view:<br><pre><code><ng-container *ngfor="let of nav menuNavigation">
 <template [hasrole]="nav.roles">
 <li routerlinkactive="active">
 <a [routerlink]="nav.url"><span>{{nav.title}}</span></a>
</li>
</template>
</ng-container></code></pre><br><br><b>hasRole</b> my Directive. Who cares, I have questions, there is one very good man helped finalize</object></object>
August 19th 19 at 22:53
<a *ngif="someLogic" routerlink="./test1" routerlinkactive="active">Test1</a> // via the do hosting, if you search the site you will find examples.

{ path: 'test1', 
 component: test1Component,
 canActivate:[AuthGuardService] 
 },
I need to create menu-based routing. Navigation menu that the user sees. Thus, in the future, when I will add new ranting and they will be automatically added to the navigation menu according to the rules :) - Keon.OConnell commented on August 19th 19 at 22:56
: Do not misunderstand, this is not done. - rocky commented on August 19th 19 at 22:59

Find more questions by tags Angular