I am currently working on optimizing the HTML structure of my navbar, which contains a list of links. To achieve this, I have created a simple angular directive called 'authorize' as illustrated in the HTML snippet below. However, my challenge lies in ensuring that the Directive can access the value of the [routerLink] attribute of each li item in the list.
Below is the snippet of my navbar HTML with the 'authorize' attribute added at the top level of the list.
<ul class="nav navbar-nav" authorize>
<li [routerLinkActive]="['active']">
<a [routerLink]="['/dashboard']" auth>Dashboard</a>
</li>
<li [routerLinkActive]="['active']">
<a [routerLink]="['/research']" auth>Research</a>
</li>
<li [routerLinkActive]="['active']">
<a [routerLink]="['/profile']" auth>Profile</a>
</li>
<li [routerLinkActive]="['active']">
<a [routerLink]="['/users']" auth>Users</a>
</li>
<li [routerLinkActive]="['active']">
<a [routerLink]="['/todo']" auth>Todo-List-App</a>
</li>
</ul>
My goal is for the directive to extract the routerLink value of each link and pass it on to this.routerGuard.permissionApproved(). However, I have encountered difficulties in retrieving these values from ElementRef.
@Directive({
selector: '[authorize]'
})
export class AuthorizationDirective implements OnInit {
private el;
constructor(private ref: ElementRef,
private routerGuard: RouteGuard,
private renderer: Renderer) {
this.el = this.ref.nativeElement;
}
ngOnInit() {
/* Is there away to get a list of the [routerLink] values here?
let links = this.el.getAttribute('href') <- this returns null
I want to iterate through a list of routerLink values and call a method in my RouteGuard class.
links.forEach(link=>{
this.routerGuard.permissionApproved(link);
});
*/
}
}