fix(module:menu): fix submenu level bug & fix menu routerLinkActive b…

…ug in lazyload module (#77) this closes #35 #52 #74
NG-ZORRO · Aug 18, 2017 · b914afd · b914afd
1 parent 44865c2
commit b914afd
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 12 deletions.
diff --git a/src/components/menu/nz-menu-item.component.ts b/src/components/menu/nz-menu-item.component.ts
@@ -5,6 +5,7 @@ import {
   AfterViewInit,
   HostListener,
   ChangeDetectorRef,
+  Renderer2,
   Optional,
   ElementRef
 } from '@angular/core';
@@ -14,17 +15,31 @@ import { NzSubMenuComponent } from './nz-submenu.component';
 export const PADDING_BASE = 24;
 
 @Component({
-  selector     : '[nz-menu-item]',
-  template     : `
+  selector: '[nz-menu-item]',
+  template: `
     <ng-content></ng-content>`,
 })
 
 export class NzMenuItemComponent implements AfterViewInit {
   level = 0;
   padding = null;
   isInDropDown = false;
+  selected = false;
   @Input() nzDisable = false;
-  @Input() nzSelected = false;
+
+  @Input()
+  set nzSelected(value: boolean) {
+    this.selected = value;
+    if (value) {
+      this._renderer.addClass(this.hostElement.nativeElement, 'ant-menu-item-selected')
+    } else {
+      this._renderer.removeClass(this.hostElement.nativeElement, 'ant-menu-item-selected')
+    }
+  }
+
+  get nzSelected() {
+    return this.selected;
+  }
 
   /** clear all item selected status except this */
   @HostListener('click', [ '$event' ])
@@ -51,11 +66,6 @@ export class NzMenuItemComponent implements AfterViewInit {
     return this.isInDropDown && this.nzDisable;
   }
 
-  @HostBinding('class.ant-menu-item-selected')
-  get setMenuSelectedClass() {
-    return this.nzSelected;
-  }
-
   @HostBinding('class.ant-menu-item-disabled')
   get setMenuDisableClass() {
     return (!this.isInDropDown) && this.nzDisable;
@@ -80,7 +90,7 @@ export class NzMenuItemComponent implements AfterViewInit {
     }
   }
 
-  constructor(public cd: ChangeDetectorRef, private nzMenuComponent: NzMenuComponent, @Optional() public nzSubMenuComponent: NzSubMenuComponent, private hostElement: ElementRef) {
+  constructor(private _renderer: Renderer2, public cd: ChangeDetectorRef, private nzMenuComponent: NzMenuComponent, @Optional() public nzSubMenuComponent: NzSubMenuComponent, private hostElement: ElementRef) {
     this.nzMenuComponent.menuItems.push(this);
     /** store origin padding in padding */
     if (this.hostElement.nativeElement.style[ 'padding-left' ]) {

diff --git a/src/components/menu/nz-submenu.component.ts b/src/components/menu/nz-submenu.component.ts
@@ -50,7 +50,7 @@ import { Subject } from 'rxjs/Rx';
 
 export class NzSubMenuComponent implements OnInit, OnDestroy, AfterViewInit {
   isInDropDown = false;
-  level = 0;
+  level = 1;
   _$mouseSubject = new Subject();
   @ContentChildren(NzSubMenuComponent) subMenus;
   @Input() nzOpen = false;
@@ -135,7 +135,7 @@ export class NzSubMenuComponent implements OnInit, OnDestroy, AfterViewInit {
   ngAfterViewInit() {
     this.isInDropDown = this.nzMenuComponent.isInDropDown;
     if (this.subMenus.length && (this.nzMenuComponent.nzMode === 'inline')) {
-      this.subMenus.forEach(menu => {
+      this.subMenus.filter(x => x !== this).forEach(menu => {
         setTimeout(_ => {
           menu.level = this.level + 1;
         });

diff --git a/src/showcase/nz-demo-layout/nz-demo-layout-side.component.ts b/src/showcase/nz-demo-layout/nz-demo-layout-side.component.ts
@@ -65,7 +65,7 @@ import { Component, OnInit } from '@angular/core';
   ]
 })
 export class NzDemoLayoutSideComponent implements OnInit {
-  isCollapsed = false;
+  isCollapsed = true;
 
   constructor() {
   }