fix(module:menu): fix menu ExpressionChangedAfterItHasBeenCheckedError (

#1306) close #1216
NG-ZORRO · Apr 11, 2018 · e63668d · e63668d
1 parent 7925f48
commit e63668d
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 21 deletions.
diff --git a/components/menu/nz-menu-item.directive.ts b/components/menu/nz-menu-item.directive.ts
@@ -89,32 +89,28 @@ export class NzMenuItemDirective implements OnInit {
 
   @HostBinding('style.padding-left.px')
   get setPaddingLeft(): number {
-    if (this.nzSubMenuComponent) {
-      /** if in sub menu component */
-      if (this.nzSubMenuComponent.nzMenuDirective.nzMode === 'inline' && (this.nzSubMenuComponent.nzMenuDirective)) {
-        /** if host menu's mode is inline add PADDING_BASE * level padding */
-        return (this.nzSubMenuComponent.level + 1) * this.nzSubMenuComponent.nzMenuDirective.nzInlineIndent;
+    if (this.nzMenuDirective.nzMode === 'inline') {
+      if (this.nzSubMenuComponent) {
+        /** if in sub menu component and host menu's mode is inline add PADDING_BASE * level padding */
+        return (this.nzSubMenuComponent.level + 1) * this.nzMenuDirective.nzInlineIndent;
       } else {
-        /** return origin padding */
-        return this.padding;
+        /** not in sub menu component but root menu's mode is inline return default padding */
+        return this.nzMenuDirective.nzInlineIndent;
       }
-    } else if (this.nzMenuDirective.hasSubMenu && (this.nzMenuDirective.nzMode === 'inline')) {
-      /** not in sub menu component but root menu's mode is inline and contains submenu return default padding*/
-      return this.nzMenuDirective.nzInlineIndent;
     } else {
       return this.padding;
     }
   }
 
   constructor(private renderer: Renderer2, public cd: ChangeDetectorRef, private nzMenuDirective: NzMenuDirective, @Optional() public nzSubMenuComponent: NzSubMenuComponent, private hostElement: ElementRef) {
+  }
+
+  ngOnInit(): void {
     this.nzMenuDirective.menuItems.push(this);
     /** store origin padding in padding */
     if (this.hostElement.nativeElement.style[ 'padding-left' ]) {
       this.padding = parseInt(this.hostElement.nativeElement.style[ 'padding-left' ], 10);
     }
-  }
-
-  ngOnInit(): void {
     this.isInDropDown = this.nzMenuDirective.nzInDropDown;
   }
 }
diff --git a/components/menu/nz-menu.directive.ts b/components/menu/nz-menu.directive.ts
@@ -29,8 +29,6 @@ export class NzMenuDirective implements AfterViewInit {
   private cacheMode: NzMode;
   /** opened index of array */
   private subMenusOpenIndex = [];
-  /** set when has submenu component */
-  hasSubMenu = false;
 
   /** collection of menu item */
   menuItems: NzMenuItemDirective[] = [];
@@ -168,10 +166,6 @@ export class NzMenuDirective implements AfterViewInit {
     this.subMenusOpenIndex = [];
   }
 
-  setHasSubMenu(value: boolean): void {
-    this.hasSubMenu = value;
-  }
-
   clickItem(value: NzMenuItemDirective): void {
     this.nzClick.emit(value);
   }

diff --git a/components/menu/nz-submenu.component.ts b/components/menu/nz-submenu.component.ts
@@ -359,11 +359,10 @@ export class NzSubMenuComponent implements OnInit, OnDestroy, AfterContentInit {
   }
 
   constructor(public nzMenuDirective: NzMenuDirective, private cd: ChangeDetectorRef, @SkipSelf() @Optional() private nzSubMenuComponent: NzSubMenuComponent, @Host() @Optional() private nzDropDownComponent: NzDropDownComponent, @Host() @Optional() private nzDropDownButtonComponent: NzDropDownButtonComponent) {
-    this.nzMenuDirective.setHasSubMenu(true);
-    this.nzMenuDirective.subMenus.push(this);
   }
 
   ngOnInit(): void {
+    this.nzMenuDirective.subMenus.push(this);
     const $combineAll = this.$mouseSubject.asObservable().pipe(combineLatest(this.$subOpen), map(value => value[ 0 ] || value[ 1 ]), auditTime(150));
     this.openSubscription = $combineAll.subscribe(this.handleOpenEvent);
     this.isInDropDown = this.nzMenuDirective.nzInDropDown;