File
Implements
Metadata
selector |
ab-router-menu |
styles |
nav { z-index: 11000; }
a { pointer: finger; }
|
template |
<nav *ngIf="routes.length > 0">
<ul [ngClass]="listClass">
<li *ngFor="let route of routes" class="nav-item">
<!--<span *ngIf="route.data._permissions.except !== ''">-->
<!--<a *ngxPermissionsExcept="route.data._permissions.except"-->
<!--[routerLink]="[route.path]"-->
<!--routerLinkActive="active">{{ route.data.title }}-->
<!--</a>-->
<!--</span>-->
<!--<a *ngxPermissionsOnly="route.data._permissions.only"-->
<a
class="nav-link"
[routerLink]="[route.path]"
(click)="onClick(route)"
routerLinkActive="active">{{ route.data.title || route.path }}
</a>
<!--<a *ngxPermissionsExcept="route.data._permissions.except"-->
<!--[routerLink]="[route.path]"-->
<!--routerLinkActive="active">{{ route.data.title }}-->
<!--</a>-->
</li>
<!--<ng-template ngFor="let route of routes">-->
<!--<li><a>TEST</a></li>-->
<!--<ng-template ngxPermissionsOnly="route.data._permissions.only" ngxPermissionsExcept="route.data._permissions.except">-->
<!--<div>ngxPermissionsOnly ['DEVELOPER','OWNER'] </div>-->
<!--</ng-template>-->
<!--</ng-template>-->
</ul>
</nav>
|
Index
Properties
|
|
Methods
|
|
Inputs
|
|
Outputs
|
|
showHome
|
Default value: true
|
|
translateService
|
Type: any
|
|
Methods
onRouterEvent
|
onRouterEvent(event: )
|
|
|
currentLevel
|
currentLevel: number
|
Type : number
|
Default value : 0
|
|
import {Component, ElementRef, Input, Output, OnInit, EventEmitter} from '@angular/core';
// import {NgxPermissionsService,NgxRolesService} from 'ngx-permissions';
@Component({
selector: 'ab-router-menu',
template: `
<nav *ngIf="routes.length > 0">
<ul [ngClass]="listClass">
<li *ngFor="let route of routes" class="nav-item">
<!--<span *ngIf="route.data._permissions.except !== ''">-->
<!--<a *ngxPermissionsExcept="route.data._permissions.except"-->
<!--[routerLink]="[route.path]"-->
<!--routerLinkActive="active">{{ route.data.title }}-->
<!--</a>-->
<!--</span>-->
<!--<a *ngxPermissionsOnly="route.data._permissions.only"-->
<a
class="nav-link"
[routerLink]="[route.path]"
(click)="onClick(route)"
routerLinkActive="active">{{ route.data.title || route.path }}
</a>
<!--<a *ngxPermissionsExcept="route.data._permissions.except"-->
<!--[routerLink]="[route.path]"-->
<!--routerLinkActive="active">{{ route.data.title }}-->
<!--</a>-->
</li>
<!--<ng-template ngFor="let route of routes">-->
<!--<li><a>TEST</a></li>-->
<!--<ng-template ngxPermissionsOnly="route.data._permissions.only" ngxPermissionsExcept="route.data._permissions.except">-->
<!--<div>ngxPermissionsOnly ['DEVELOPER','OWNER'] </div>-->
<!--</ng-template>-->
<!--</ng-template>-->
</ul>
</nav>
`,
styles: [`
nav { z-index: 11000; }
a { pointer: finger; }
`]
})
export class AbRouterMenuComponent implements OnInit {
@Input() router: any;
@Input() routes: any[];
@Input() listClass: string;
@Input() translateService: any;
@Input() showHome = true;
@Output() select = new EventEmitter();
el: HTMLElement;
currentUrl: string;
currentLevel = 0;
constructor(public elementRef: ElementRef) { }
ngOnInit() {
this.el = this.elementRef.nativeElement;
if (!this.router) {
console.log('error: router @Input is not defined');
}
this.router.events.subscribe((event) => {
this.onRouterEvent(event);
});
this.routes.forEach((route) => {
let permissions = {
only: '',
except: '',
// redirectTo: ''
};
if(!route.data){
route.data = {}
}
if(route.data.permissions){
Object.keys(route.data.permissions).forEach((k, i) => {
permissions[k] = route.data.permissions[k];
});
}
route.data._permissions = permissions;
});
}
onRouterEvent(event) {
// fixme: use only on last event
if (event.urlAfterRedirects && typeof event.urlAfterRedirects === 'string') {
this.currentUrl = event.urlAfterRedirects;
this.currentLevel = this.currentUrl.split('/').length - 1;
}
}
onClick(item) {
this.select.emit(item);
}
}
Legend
Html element with directive