feat(abc:sidebar-nav): add select event, close #54

ng-alain · Apr 8, 2018 · 7467e5e · 7467e5e
1 parent ac6c3f7
commit 7467e5e
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 6 deletions.
diff --git a/packages/abc/sidebar-nav/index.md b/packages/abc/sidebar-nav/index.md
@@ -21,3 +21,4 @@ ng-alain 左边主菜单，依赖于 `@delon/theme`。
 参数 | 说明 | 类型 | 默认值
 ----|------|-----|------
 autoCloseUnderPad | 小于Pad宽度时路由切换后自动关闭侧边栏 | `boolean` | `true`
+select | 切换时回调 | `EventEmitter<Menu>` | -
diff --git a/packages/abc/sidebar-nav/sidebar-nav.component.html b/packages/abc/sidebar-nav/sidebar-nav.component.html
@@ -7,7 +7,7 @@
             <ng-container *ngFor="let child1 of group.children">
                 <li *ngIf="child1._hidden !== true" [routerLinkActive]="['nav-item-selected']" [class.nav-submenu-open]="child1._open">
                     <!-- link -->
-                    <a *ngIf="child1._type === 1" [routerLink]="child1.link" [target]="child1.target">
+                    <a *ngIf="child1._type === 1" (click)="onSelect(child1)" [routerLink]="child1.link" [target]="child1.target">
                         <i *ngIf="!settings.layout.collapsed" class="{{ child1.icon }}"></i>
                         <nz-tooltip *ngIf="settings.layout.collapsed" nzPlacement="right" [nzTitle]="child1.text">
                             <span nz-tooltip><i class="{{ child1.icon }}"></i></span>
@@ -37,7 +37,7 @@
                             <li *ngIf="child2._hidden !== true" [routerLinkActive]="['nav-item-selected']"
                                 [class.nav-submenu-open]="child2._open">
                                 <!-- link -->
-                                <a *ngIf="child2._type === 1" [routerLink]="child2.link" [target]="child2.target">{{ child2.text }}</a>
+                                <a *ngIf="child2._type === 1" (click)="onSelect(child2)" [routerLink]="child2.link" [target]="child2.target">{{ child2.text }}</a>
                                 <!-- external link -->
                                 <a *ngIf="child2._type === 2" href="{{ child2.externalLink }}" target="{{ child2.target }}">{{ child2.text }}</a>
                                 <!-- has children link -->
@@ -53,7 +53,7 @@
                                     <ng-container *ngFor="let child3 of child2.children">
                                         <li *ngIf="child3._hidden !== true" [routerLinkActive]="['nav-item-selected']" [class.nav-submenu-open]="child3._open">
                                             <!-- link -->
-                                            <a *ngIf="child3._type === 1" [routerLink]="child3.link" [target]="child3.target">{{ child3.text }}</a>
+                                            <a *ngIf="child3._type === 1" (click)="onSelect(child3)" [routerLink]="child3.link" [target]="child3.target">{{ child3.text }}</a>
                                             <!-- external link -->
                                             <a *ngIf="child3._type === 2" href="{{ child3.externalLink }}" target="{{ child3.target }}">{{ child3.text }}</a>
                                             <!-- badge -->

diff --git a/packages/abc/sidebar-nav/sidebar-nav.component.ts b/packages/abc/sidebar-nav/sidebar-nav.component.ts
@@ -1,10 +1,10 @@
-import { Component, ElementRef, Renderer2, Inject, OnInit, OnDestroy, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, Input } from '@angular/core';
+import { Component, ElementRef, Renderer2, Inject, OnInit, OnDestroy, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, Input, Output, EventEmitter } from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router';
 import { DOCUMENT } from '@angular/common';
 import { Subscription } from 'rxjs/Subscription';
 import { debounceTime, filter } from 'rxjs/operators';
 import { FromEventObservable } from 'rxjs/observable/FromEventObservable';
-import { MenuService, SettingsService } from '@delon/theme';
+import { MenuService, SettingsService, Menu } from '@delon/theme';
 
 import { Nav } from './interface';
 
@@ -27,6 +27,8 @@ export class SidebarNavComponent implements OnInit, OnDestroy {
 
     @Input() autoCloseUnderPad = true;
 
+    @Output() select = new EventEmitter<Menu>();
+
     constructor(
         private menuSrv: MenuService,
         public settings: SettingsService,
@@ -61,6 +63,7 @@ export class SidebarNavComponent implements OnInit, OnDestroy {
             url = url.slice(1);
         }
         this.router.navigateByUrl(url);
+        this.onSelect(this.menuSrv.getPathByUrl(url).pop());
         this.hideAll();
         return false;
     }
@@ -126,6 +129,10 @@ export class SidebarNavComponent implements OnInit, OnDestroy {
         this.calPos(linkNode as HTMLLinkElement, subNode);
     }
 
+    onSelect(item: Menu) {
+        this.select.emit(item);
+    }
+
     toggleOpen(item: Nav) {
         this.menuSrv.visit((i, p) => {
             if (i !== item) i._open = false;

diff --git a/packages/abc/sidebar-nav/sidebar-nav.spec.ts b/packages/abc/sidebar-nav/sidebar-nav.spec.ts
@@ -76,6 +76,20 @@ describe('abc: sidebar-nav', () => {
         return '';
     }
 
+    it('should be navigate url', () => {
+        createComp();
+        spyOn(context, 'select');
+        const data = deepCopy(MOCKMENUS);
+        menuSrv.add(data);
+        expect(context.select).not.toHaveBeenCalled();
+        expect(router.navigateByUrl).not.toHaveBeenCalled();
+        const itemEl = getEl<HTMLElement>('.nav-depth1 a');
+        itemEl.click();
+        fixture.detectChanges();
+        expect(context.select).toHaveBeenCalled();
+        expect(router.navigateByUrl).toHaveBeenCalled();
+    });
+
     it('should be toggle open', () => {
         createComp();
         const data = deepCopy(MOCKMENUS);
@@ -230,10 +244,11 @@ describe('abc: sidebar-nav', () => {
 
 @Component({
     template: `
-    <sidebar-nav #comp [autoCloseUnderPad]="autoCloseUnderPad"></sidebar-nav>
+    <sidebar-nav #comp [autoCloseUnderPad]="autoCloseUnderPad" (select)="select()"></sidebar-nav>
     `
 })
 class TestComponent {
     @ViewChild('comp') comp: SidebarNavComponent;
     autoCloseUnderPad = false;
+    select() {}
 }