Fixed #2393

primefaces · Mar 27, 2017 · 614f5f0 · 614f5f0
1 parent fa4f6bf
commit 614f5f0
Show file tree

Hide file tree

Showing 11 changed files with 123 additions and 115 deletions.
diff --git a/components/breadcrumb/breadcrumb.ts b/components/breadcrumb/breadcrumb.ts
@@ -2,7 +2,7 @@ import {NgModule,Component,Input,OnDestroy,EventEmitter} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {MenuItem} from '../common/api';
 import {Location} from '@angular/common';
-import {Router} from '@angular/router';
+import {RouterModule} from '@angular/router';
 
 @Component({
     selector: 'p-breadcrumb',
@@ -13,7 +13,11 @@ import {Router} from '@angular/router';
                 <li class="ui-breadcrumb-chevron fa fa-chevron-right" *ngIf="model"></li>
                 <ng-template ngFor let-item let-end="last" [ngForOf]="model">
                     <li role="menuitem">
-                        <a [href]="item.url||'#'" class="ui-menuitem-link" (click)="itemClick($event, item)" 
+                        <a *ngIf="!item.routerLink" [href]="item.url||'#'" class="ui-menuitem-link" (click)="itemClick($event, item)" 
+                            [ngClass]="{'ui-state-disabled':item.disabled}" [attr.target]="item.target">
+                            <span class="ui-menuitem-text">{{item.label}}</span>
+                        </a>
+                        <a *ngIf="item.routerLink" [routerLink]="item.routerLink" [routerLinkActive]="'ui-state-active'" class="ui-menuitem-link" (click)="itemClick($event, item)" 
                             [ngClass]="{'ui-state-disabled':item.disabled}" [attr.target]="item.target">
                             <span class="ui-menuitem-text">{{item.label}}</span>
                         </a>
@@ -33,16 +37,14 @@ export class Breadcrumb implements OnDestroy {
     @Input() styleClass: string;
 
     @Input() home: MenuItem;
-
-    constructor(public router: Router) {}
-
+
     itemClick(event, item: MenuItem) {
         if(item.disabled) {
             event.preventDefault();
             return;
         }
 
-        if(!item.url||item.routerLink) {
+        if(!item.url) {
             event.preventDefault();
         }
 
@@ -57,10 +59,6 @@ export class Breadcrumb implements OnDestroy {
                 item: item
             });
         }
-
-        if(item.routerLink) {
-            this.router.navigate(item.routerLink);
-        }
     }
 
     onHomeClick(event) {
@@ -82,8 +80,8 @@ export class Breadcrumb implements OnDestroy {
 }
 
 @NgModule({
-    imports: [CommonModule],
-    exports: [Breadcrumb],
+    imports: [CommonModule,RouterModule],
+    exports: [Breadcrumb,RouterModule],
     declarations: [Breadcrumb]
 })
 export class BreadcrumbModule { }
diff --git a/components/contextmenu/contextmenu.ts b/components/contextmenu/contextmenu.ts
@@ -3,7 +3,7 @@ import {CommonModule} from '@angular/common';
 import {DomHandler} from '../dom/domhandler';
 import {MenuItem} from '../common/api';
 import {Location} from '@angular/common';
-import {Router} from '@angular/router';
+import {RouterModule} from '@angular/router';
 
 @Component({
     selector: 'p-contextMenuSub',
@@ -13,7 +13,13 @@ import {Router} from '@angular/router';
             <ng-template ngFor let-child [ngForOf]="(root ? item : item.items)">
                 <li #item [ngClass]="{'ui-menuitem ui-widget ui-corner-all':true,'ui-menu-parent':child.items,'ui-menuitem-active':item==activeItem}"
                     (mouseenter)="onItemMouseEnter($event,item,child)" (mouseleave)="onItemMouseLeave($event,item)">
-                    <a [href]="child.url||'#'" class="ui-menuitem-link ui-corner-all" [attr.target]="child.target"
+                    <a *ngIf="!child.routerLink" [href]="child.url||'#'" class="ui-menuitem-link ui-corner-all" [attr.target]="child.target"
+                        [ngClass]="{'ui-state-disabled':child.disabled}" (click)="itemClick($event, child)">
+                        <span class="ui-submenu-icon fa fa-fw fa-caret-right" *ngIf="child.items"></span>
+                        <span class="ui-menuitem-icon fa fa-fw" *ngIf="child.icon" [ngClass]="child.icon"></span>
+                        <span class="ui-menuitem-text">{{child.label}}</span>
+                    </a>
+                    <a *ngIf="child.routerLink" [routerLink]="child.routerLink" [routerLinkActive]="'ui-state-active'" class="ui-menuitem-link ui-corner-all" [attr.target]="child.target"
                         [ngClass]="{'ui-state-disabled':child.disabled}" (click)="itemClick($event, child)">
                         <span class="ui-submenu-icon fa fa-fw fa-caret-right" *ngIf="child.items"></span>
                         <span class="ui-menuitem-icon fa fa-fw" *ngIf="child.icon" [ngClass]="child.icon"></span>
@@ -32,7 +38,7 @@ export class ContextMenuSub {
 
     @Input() root: boolean;
 
-    constructor(public domHandler: DomHandler, public router: Router, @Inject(forwardRef(() => ContextMenu)) public contextMenu: ContextMenu) {}
+    constructor(public domHandler: DomHandler, @Inject(forwardRef(() => ContextMenu)) public contextMenu: ContextMenu) {}
 
     activeItem: any;
 
@@ -62,7 +68,7 @@ export class ContextMenuSub {
             return;
         }
 
-        if(!item.url||item.routerLink) {
+        if(!item.url) {
             event.preventDefault();
         }
 
@@ -77,10 +83,6 @@ export class ContextMenuSub {
                 item: item
             });
         }
-
-        if(item.routerLink) {
-            this.router.navigate(item.routerLink);
-        }
     }
 
     listClick(event) {
@@ -269,8 +271,8 @@ export class ContextMenu implements AfterViewInit,OnDestroy {
 }
 
 @NgModule({
-    imports: [CommonModule],
-    exports: [ContextMenu],
+    imports: [CommonModule,RouterModule],
+    exports: [ContextMenu,RouterModule],
     declarations: [ContextMenu,ContextMenuSub]
 })
 export class ContextMenuModule { }
diff --git a/components/megamenu/megamenu.ts b/components/megamenu/megamenu.ts
@@ -3,7 +3,7 @@ import {CommonModule} from '@angular/common';
 import {DomHandler} from '../dom/domhandler';
 import {MenuItem} from '../common/api';
 import {Location} from '@angular/common';
-import {Router} from '@angular/router';
+import {RouterModule} from '@angular/router';
 
 @Component({
     selector: 'p-megaMenu',
@@ -27,7 +27,12 @@ import {Router} from '@angular/router';
                                             <ul class="ui-menu-list ui-helper-reset">
                                                 <li class="ui-widget-header ui-corner-all"><h3>{{submenu.label}}</h3></li>
                                                 <li *ngFor="let item of submenu.items" class="ui-menuitem ui-widget ui-corner-all">
-                                                    <a [href]="item.url||'#'" class="ui-menuitem-link ui-corner-all" [attr.target]="item.target"
+                                                    <a *ngIf="!item.routerLink" [href]="item.url||'#'" class="ui-menuitem-link ui-corner-all" [attr.target]="item.target"
+                                                        [ngClass]="{'ui-state-disabled':item.disabled}" (click)="itemClick($event, item)">
+                                                        <span class="ui-menuitem-icon fa fa-fw" *ngIf="item.icon" [ngClass]="item.icon"></span>
+                                                        <span class="ui-menuitem-text">{{item.label}}</span>
+                                                    </a>
+                                                    <a *ngIf="item.routerLink" [routerLink]="item.routerLink" [routerLinkActive]="'ui-state-active'" class="ui-menuitem-link ui-corner-all" [attr.target]="item.target"
                                                         [ngClass]="{'ui-state-disabled':item.disabled}" (click)="itemClick($event, item)">
                                                         <span class="ui-menuitem-icon fa fa-fw" *ngIf="item.icon" [ngClass]="item.icon"></span>
                                                         <span class="ui-menuitem-text">{{item.label}}</span>
@@ -58,7 +63,7 @@ export class MegaMenu implements OnDestroy {
 
     activeItem: any;
 
-    constructor(public el: ElementRef, public domHandler: DomHandler, public renderer: Renderer, public router: Router) {}
+    constructor(public el: ElementRef, public domHandler: DomHandler, public renderer: Renderer) {}
 
     onItemMouseEnter(event, item, menuitem: MenuItem) {
         if(menuitem.disabled) {
@@ -91,7 +96,7 @@ export class MegaMenu implements OnDestroy {
             return;
         }
 
-        if(!item.url||item.routerLink) {
+        if(!item.url) {
             event.preventDefault();
         }
 
@@ -106,11 +111,7 @@ export class MegaMenu implements OnDestroy {
                 item: item
             });
         }
-
-        if(item.routerLink) {
-            this.router.navigate(item.routerLink);
-        }
-
+
         this.activeItem = null;
     }
 
@@ -164,8 +165,8 @@ export class MegaMenu implements OnDestroy {
 }
 
 @NgModule({
-    imports: [CommonModule],
-    exports: [MegaMenu],
+    imports: [CommonModule,RouterModule],
+    exports: [MegaMenu,RouterModule],
     declarations: [MegaMenu]
 })
 export class MegaMenuModule { }
diff --git a/components/menu/menu.css b/components/menu/menu.css
@@ -210,7 +210,7 @@
 .ui-panelmenu .ui-panelmenu-header {
     cursor: pointer;
     position: relative;
-    margin: 0;
+    margin: -1px 0 0 0;
     zoom: 1;
 }
 

diff --git a/components/menu/menu.ts b/components/menu/menu.ts
@@ -2,7 +2,7 @@ import {NgModule,Component,ElementRef,AfterViewInit,OnDestroy,Input,Output,Rende
 import {CommonModule} from '@angular/common';
 import {DomHandler} from '../dom/domhandler';
 import {MenuItem} from '../common/api';
-import {Router} from '@angular/router';
+import {RouterModule} from '@angular/router';
 
 @Component({
     selector: 'p-menu',
@@ -13,7 +13,12 @@ import {Router} from '@angular/router';
                 <ng-template ngFor let-submenu [ngForOf]="model" *ngIf="hasSubMenu()">
                     <li class="ui-widget-header ui-corner-all"><h3>{{submenu.label}}</h3></li>
                     <li *ngFor="let item of submenu.items" class="ui-menuitem ui-widget ui-corner-all">
-                        <a [href]="item.url||'#'" class="ui-menuitem-link ui-corner-all" [attr.target]="item.target"
+                        <a *ngIf="!item.routerLink" [href]="item.url||'#'" class="ui-menuitem-link ui-corner-all" [attr.target]="item.target"
+                            [ngClass]="{'ui-state-disabled':item.disabled}" (click)="itemClick($event, item)">
+                            <span class="ui-menuitem-icon fa fa-fw" *ngIf="item.icon" [ngClass]="item.icon"></span>
+                            <span class="ui-menuitem-text">{{item.label}}</span>
+                        </a>
+                        <a *ngIf="item.routerLink" [routerLink]="item.routerLink" [routerLinkActive]="'ui-state-active'" class="ui-menuitem-link ui-corner-all" [attr.target]="item.target"
                             [ngClass]="{'ui-state-disabled':item.disabled}" (click)="itemClick($event, item)">
                             <span class="ui-menuitem-icon fa fa-fw" *ngIf="item.icon" [ngClass]="item.icon"></span>
                             <span class="ui-menuitem-text">{{item.label}}</span>
@@ -22,7 +27,12 @@ import {Router} from '@angular/router';
                 </ng-template>
                 <ng-template ngFor let-item [ngForOf]="model" *ngIf="!hasSubMenu()">
                     <li class="ui-menuitem ui-widget ui-corner-all">
-                        <a [href]="item.url||'#'" class="ui-menuitem-link ui-corner-all" [attr.target]="item.target"
+                        <a *ngIf="!item.routerLink" [href]="item.url||'#'" class="ui-menuitem-link ui-corner-all" [attr.target]="item.target"
+                            [ngClass]="{'ui-state-disabled':item.disabled}" (click)="itemClick($event, item)">
+                            <span class="ui-menuitem-icon fa fa-fw" *ngIf="item.icon" [ngClass]="item.icon"></span>
+                            <span class="ui-menuitem-text">{{item.label}}</span>
+                        </a>
+                        <a *ngIf="item.routerLink" [routerLink]="item.routerLink" [routerLinkActive]="'ui-state-active'" class="ui-menuitem-link ui-corner-all" [attr.target]="item.target"
                             [ngClass]="{'ui-state-disabled':item.disabled}" (click)="itemClick($event, item)">
                             <span class="ui-menuitem-icon fa fa-fw" *ngIf="item.icon" [ngClass]="item.icon"></span>
                             <span class="ui-menuitem-text">{{item.label}}</span>
@@ -57,7 +67,7 @@ export class Menu implements AfterViewInit,OnDestroy {
 
     onResizeTarget: any;
 
-    constructor(public el: ElementRef, public domHandler: DomHandler, public renderer: Renderer, public router: Router) {}
+    constructor(public el: ElementRef, public domHandler: DomHandler, public renderer: Renderer) {}
 
     ngAfterViewInit() {
         this.container = <HTMLDivElement> this.containerViewChild.nativeElement;
@@ -112,7 +122,7 @@ export class Menu implements AfterViewInit,OnDestroy {
             return;
         }
 
-        if(!item.url||item.routerLink) {
+        if(!item.url) {
             event.preventDefault();
         }
 
@@ -131,10 +141,6 @@ export class Menu implements AfterViewInit,OnDestroy {
         if(this.popup) {
             this.hide();
         }
-
-        if(item.routerLink) {
-            this.router.navigate(item.routerLink);
-        }
     }
 
     ngOnDestroy() {
@@ -180,8 +186,8 @@ export class Menu implements AfterViewInit,OnDestroy {
 }
 
 @NgModule({
-    imports: [CommonModule],
-    exports: [Menu],
+    imports: [CommonModule,RouterModule],
+    exports: [Menu,RouterModule],
     declarations: [Menu]
 })
 export class MenuModule { }
diff --git a/components/menubar/menubar.ts b/components/menubar/menubar.ts
@@ -3,7 +3,7 @@ import {CommonModule} from '@angular/common';
 import {DomHandler} from '../dom/domhandler';
 import {MenuItem} from '../common/api';
 import {Location} from '@angular/common';
-import {Router} from '@angular/router';
+import {RouterModule} from '@angular/router';
 
 @Component({
     selector: 'p-menubarSub',
@@ -13,7 +13,13 @@ import {Router} from '@angular/router';
             <ng-template ngFor let-child [ngForOf]="(root ? item : item.items)">
                 <li #item [ngClass]="{'ui-menuitem ui-widget ui-corner-all':true,'ui-menu-parent':child.items,'ui-menuitem-active':item==activeItem}"
                     (mouseenter)="onItemMouseEnter($event,item,child)" (mouseleave)="onItemMouseLeave($event,item)">
-                    <a #link [href]="child.url||'#'" class="ui-menuitem-link ui-corner-all" [attr.target]="child.target"
+                    <a *ngIf="!item.routerLink" [href]="child.url||'#'" class="ui-menuitem-link ui-corner-all" [attr.target]="child.target"
+                        [ngClass]="{'ui-state-disabled':child.disabled}" (click)="itemClick($event, child)">
+                        <span class="ui-menuitem-icon fa fa-fw" *ngIf="child.icon" [ngClass]="child.icon"></span>
+                        <span class="ui-menuitem-text">{{child.label}}</span>
+                        <span class="ui-submenu-icon fa fa-fw" *ngIf="child.items" [ngClass]="{'fa-caret-down':root,'fa-caret-right':!root}"></span>
+                    </a>
+                    <a *ngIf="item.routerLink" [routerLink]="item.routerLink" [routerLinkActive]="'ui-state-active'" [href]="child.url||'#'" class="ui-menuitem-link ui-corner-all" [attr.target]="child.target"
                         [ngClass]="{'ui-state-disabled':child.disabled}" (click)="itemClick($event, child)">
                         <span class="ui-menuitem-icon fa fa-fw" *ngIf="child.icon" [ngClass]="child.icon"></span>
                         <span class="ui-menuitem-text">{{child.label}}</span>
@@ -32,7 +38,7 @@ export class MenubarSub {
 
     @Input() root: boolean;
 
-    constructor(public domHandler: DomHandler, public router: Router) {}
+    constructor(public domHandler: DomHandler) {}
 
     activeItem: any;
 
@@ -68,7 +74,7 @@ export class MenubarSub {
             return;
         }
 
-        if(!item.url||item.routerLink) {
+        if(!item.url) {
             event.preventDefault();
         }
 
@@ -83,10 +89,6 @@ export class MenubarSub {
                 item: item
             });
         }
-
-        if(item.routerLink) {
-            this.router.navigate(item.routerLink);
-        }
 
         this.activeItem = null;
     }
@@ -140,8 +142,8 @@ export class Menubar implements OnDestroy {
 }
 
 @NgModule({
-    imports: [CommonModule],
-    exports: [Menubar],
+    imports: [CommonModule,RouterModule],
+    exports: [Menubar,RouterModule],
     declarations: [Menubar,MenubarSub]
 })
 export class MenubarModule { }