mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 23:40:14 +01:00
Fixed problems with the sidebar service. Switched to use "path" concept instead of component
This commit is contained in:
Ronny Roos
parent
1b2d068d46
commit
e48da7d4a4
4 changed files with 57 additions and 44 deletions
|
|
@ -1,7 +1,7 @@
|
|||
export const menuItems = [
|
||||
{
|
||||
title: 'Dashboard',
|
||||
component: 'dashboard',
|
||||
path: '/pages/dashboard',
|
||||
icon: 'fa fa-home',
|
||||
selected: false,
|
||||
expanded: false,
|
||||
|
|
@ -9,7 +9,7 @@ export const menuItems = [
|
|||
},
|
||||
{
|
||||
title: 'Charts',
|
||||
component: 'charts',
|
||||
path: '/pages/charts',
|
||||
icon: 'fa fa-bar-chart',
|
||||
selected: false,
|
||||
expanded: false,
|
||||
|
|
@ -17,13 +17,13 @@ export const menuItems = [
|
|||
subMenu: [
|
||||
{
|
||||
title: 'Chartist.Js',
|
||||
component: 'chartist-js',
|
||||
path: '/chartist-js',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'UI Features',
|
||||
component: 'ui',
|
||||
path: '/pages/ui',
|
||||
icon: 'fa fa-laptop',
|
||||
selected: false,
|
||||
expanded: false,
|
||||
|
|
@ -31,25 +31,25 @@ export const menuItems = [
|
|||
subMenu: [
|
||||
{
|
||||
title: 'Typography',
|
||||
component: 'typography',
|
||||
path: '/typography',
|
||||
},
|
||||
{
|
||||
title: 'Buttons',
|
||||
component: 'buttons',
|
||||
path: '/buttons',
|
||||
},
|
||||
{
|
||||
title: 'Icons',
|
||||
component: 'icons',
|
||||
path: '/icons',
|
||||
},
|
||||
{
|
||||
title: 'Grid',
|
||||
component: 'grid',
|
||||
path: '/grid',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Form Elements',
|
||||
component: 'forms',
|
||||
path: '/pages/forms',
|
||||
icon: 'fa fa-pencil-square-o',
|
||||
selected: false,
|
||||
expanded: false,
|
||||
|
|
@ -57,17 +57,17 @@ export const menuItems = [
|
|||
subMenu: [
|
||||
{
|
||||
title: 'Form Inputs',
|
||||
component: 'inputs',
|
||||
path: '/inputs',
|
||||
},
|
||||
{
|
||||
title: 'Form Layouts',
|
||||
component: 'layouts',
|
||||
path: '/layouts',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Tables',
|
||||
component: 'tables',
|
||||
path: '/pages/tables',
|
||||
icon: 'fa fa-table',
|
||||
selected: false,
|
||||
expanded: false,
|
||||
|
|
@ -75,13 +75,13 @@ export const menuItems = [
|
|||
subMenu: [
|
||||
{
|
||||
title: 'Basic Tables',
|
||||
component: 'basictables',
|
||||
path: '/basictables',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Maps',
|
||||
component: 'maps',
|
||||
path: '/pages/maps',
|
||||
icon: 'fa fa-map-marker',
|
||||
selected: false,
|
||||
expanded: false,
|
||||
|
|
@ -89,19 +89,19 @@ export const menuItems = [
|
|||
subMenu: [
|
||||
{
|
||||
title: 'Google Maps',
|
||||
component: 'googlemaps',
|
||||
path: '/googlemaps',
|
||||
},
|
||||
{
|
||||
title: 'Leaflet Maps',
|
||||
component: 'leafletmaps',
|
||||
path: '/leafletmaps',
|
||||
},
|
||||
{
|
||||
title: 'Bubble Maps',
|
||||
component: 'bubblemaps',
|
||||
path: '/bubblemaps',
|
||||
},
|
||||
{
|
||||
title: 'Line Maps',
|
||||
component: 'linemaps',
|
||||
path: '/linemaps',
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -114,11 +114,11 @@ export const menuItems = [
|
|||
subMenu: [
|
||||
{
|
||||
title: 'Login',
|
||||
url: '#/login',
|
||||
path: '/login',
|
||||
},
|
||||
{
|
||||
title: 'Register',
|
||||
url: '#/register',
|
||||
path: '/register',
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue