Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-01-04 16:48:49 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixed problems with the sidebar service. Switched to use "path" concept instead of component

Browse source
This commit is contained in:
Ronny Roos 2016-07-06 21:26:34 +02:00 • committed by nixa
parent 31efdaa1f1
commit f24546639c
4 changed files with 57 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/app/theme/components/baSidebar/baSidebar.component.ts
View file

@ -1,10 +1,9 @@
import {Component, ElementRef, HostListener, ViewEncapsulation} from '@angular/core';
import {Router} from '@angular/router';
import {AppState} from '../../../app.state';
import {layoutSizes} from '../../../theme';
import {BaSlimScroll} from '../../../theme/directives';
import {BaSidebarService} from './baSidebar.service';
import {Component, ElementRef, HostListener, ViewEncapsulation} from "@angular/core";
import {Router} from "@angular/router";
import {AppState} from "../../../app.state";
import {layoutSizes} from "../../../theme";
import {BaSlimScroll} from "../../../theme/directives";
import {BaSidebarService} from "./baSidebar.service";
@Component({
selector: 'ba-sidebar',
@ -35,7 +34,9 @@ export class BaSidebar {
private _state:AppState) {
this.menuItems = this._sidebarService.getMenuItems();
// this._onRouteChange = this._router.root.subscribe((path) => this._selectMenuItem());
this._onRouteChange = this._router.events.subscribe(() => {
this._selectMenuItem();
});
this._state.subscribe('menu.isCollapsed', (isCollapsed) => {
this.isMenuCollapsed = isCollapsed;
});
@ -49,7 +50,7 @@ export class BaSidebar {
}
public ngOnDestroy():void {
// this._onRouteChange.unsubscribe();
this._onRouteChange.unsubscribe();
}
public ngAfterViewInit():void {

12
src/app/theme/components/baSidebar/baSidebar.html
View file

@ -4,10 +4,10 @@
[ngClass]="{'selected': item.selected && !item.expanded, 'with-sub-menu': item.subMenu, 'ba-sidebar-item-expanded': item.expanded}">
<a *ngIf="!item.component && !item.subMenu" [attr.href]="item.url || ''" [attr.target]="item.target || ''" class="al-sidebar-list-link">
<a *ngIf="!item.path && !item.subMenu" [attr.href]="item.url || ''" [attr.target]="item.target || ''" class="al-sidebar-list-link">
<i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
</a>
<a *ngIf="item.component && !item.subMenu" [routerLink]="[item.component]" [attr.target]="item.target || ''" class="al-sidebar-list-link">
<a *ngIf="item.path && !item.subMenu" [routerLink]="[item.path]" [attr.target]="item.target || ''" class="al-sidebar-list-link">
<i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
</a>
@ -31,17 +31,17 @@
[ngClass]="{expanded: subitem.expanded, 'slide-right': subitem.slideRight}">
<li *ngFor="let subSubitem of subitem.subMenu" (mouseenter)="hoverItem($event, item)"
[ngClass]="{selected: subitem.selected}">
<a *ngIf="!item.component" (mouseenter)="hoverItem($event, item)" [attr.href]="subSubitem.url || ''" [attr.target]="subSubitem.target || ''">
<a *ngIf="!item.path" (mouseenter)="hoverItem($event, item)" [attr.href]="subSubitem.url || ''" [attr.target]="subSubitem.target || ''">
{{ subSubitem.title }}</a>
<a *ngIf="item.component" (mouseenter)="hoverItem($event, item)" [attr.target]="subSubitem.target || ''" [routerLink]="[item.component, subitem.component, subSubitem.component]">
<a *ngIf="item.path" (mouseenter)="hoverItem($event, item)" [attr.target]="subSubitem.target || ''" [routerLink]="[item.path, subitem.path]">
{{ subSubitem.title }}</a>
</li>
</ul>
<a *ngIf="!item.component && !subitem.subMenu" [attr.href]="subitem.url || ''"
<a *ngIf="!item.path && !subitem.subMenu" [attr.href]="subitem.url || ''" [routerLink]="[subitem.path || '']"
(mouseenter)="hoverItem($event, item)" [attr.target]="subitem.target || ''">
{{ subitem.title}}
</a>
<a *ngIf="item.component && !subitem.subMenu" [routerLink]="[item.component, subitem.component]"
<a *ngIf="item.path && !subitem.subMenu" [routerLink]="[item.path, subitem.path]"
(mouseenter)="hoverItem($event, item)" [attr.target]="subitem.target || ''">
{{ subitem.title}}
</a>

30
src/app/theme/components/baSidebar/baSidebar.service.ts
View file

@ -1,16 +1,17 @@
import {Injectable} from '@angular/core';
import {menuItems} from '../../../app.menu';
import {Router, UrlTree} from "@angular/router";
@Injectable()
export class BaSidebarService {
private _router;
private _router:Router;
public getMenuItems():Array<Object> {
return menuItems;
}
public setRouter(router): BaSidebarService {
public setRouter(router:Router):BaSidebarService {
this._router = router;
return this;
}
@ -20,14 +21,14 @@ export class BaSidebarService {
let assignCurrent = (menu) => (menu.selected ? currentMenu = menu : null);
items.forEach((menu: any) => {
items.forEach((menu:any) => {
this._selectItem([menu.component], menu);
this._selectItem([menu.path], menu);
assignCurrent(menu);
if (menu.subMenu) {
menu.subMenu.forEach((subMenu) => {
this._selectItem([menu.component, subMenu.component], subMenu, menu);
this._selectItem([menu.path, subMenu.path], subMenu, menu);
assignCurrent(subMenu);
});
}
@ -43,11 +44,22 @@ export class BaSidebarService {
}
}
private _isCurrent(route) {
return route ? this._router.isRouteActive(route) : false;
private _isCurrent(route:UrlTree):boolean {
if (!route)
return false;
return this._router.url === this._router.serializeUrl(route);
}
private _generateRoute(instructions) {
return instructions.filter(i => typeof i !== 'undefined').length > 0 ? this._router.generate(instructions) : null;
private _generateRoute(instructions:any[]):UrlTree {
if (!instructions)
return null;
instructions = instructions.filter(item => !!item);
if (instructions.length === 0)
return null;
return this._router.createUrlTree(instructions);
}
}