fix: menu 折叠保持展开

DevCloudFE · Oct 10, 2023 · bbfb54d · bbfb54d
1 parent 339718d
commit bbfb54d
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 15 deletions.
diff --git a/devui/menu/demo/menu-demo.component.ts b/devui/menu/demo/menu-demo.component.ts
@@ -1,12 +1,12 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { DevuiSourceData } from 'ng-devui/shared/devui-codebox/devui-source-data';
 import { TranslateService, TranslationChangeEvent } from '@ngx-translate/core';
 import { Subscription } from 'rxjs';
 @Component({
   selector: 'd-menu-demo',
   templateUrl: './menu-demo.component.html',
   })
-export class MenuDemoComponent implements OnInit, OnDestroy {
+export class MenuDemoComponent implements OnInit {
   DemoBasic: Array<DevuiSourceData> = [
     { title: 'HTML', language: 'xml', code: require('./basic/basic.component.html?raw') },
     { title: 'TS', language: 'typescript', code: require('./basic/basic.component.ts?raw') },
@@ -65,11 +65,7 @@ export class MenuDemoComponent implements OnInit, OnDestroy {
       { dAnchorLink: 'open-one', value: values['open-one'] },
       { dAnchorLink: 'loop', value: values['loop'] },
       { dAnchorLink: 'custom-node', value: values['custom-node'] },
-      { dAnchorLink: 'auto-expand', value: values['auto-expand'] },
+      // { dAnchorLink: 'auto-expand', value: values['auto-expand'] },
     ];
   }
-
-  ngOnDestroy() {
-
-  }
 }
diff --git a/devui/menu/demo/open-close/open-close.component.html b/devui/menu/demo/open-close/open-close.component.html
@@ -14,9 +14,6 @@
           d-menu-item
           (itemClick)="itemClick(item.key)"
           [active]="item.key === activeKey"
-          dTooltip
-          [content]="collapsed ? item.name : ''"
-          position="right"
           *ngFor="let item of m.children; trackBy: trackByMenu"
         >
           <d-icon class="devui-menu-item-icon" icon="icon-op-list" />

diff --git a/devui/menu/sub-menu.component.html b/devui/menu/sub-menu.component.html
@@ -27,7 +27,7 @@
     cdkConnectedOverlay
     cdkConnectedOverlayPanelClass="devui-menu-popover-panel"
     [cdkConnectedOverlayOrigin]="trigger"
-    [cdkConnectedOverlayOpen]="open"
+    [cdkConnectedOverlayOpen]="popoverOpen"
     [cdkConnectedOverlayPositions]="positions"
     cdkConnectedOverlayTransformOriginOn=".devui-sub-menu"
   >

diff --git a/devui/menu/sub-menu.component.ts b/devui/menu/sub-menu.component.ts
@@ -84,14 +84,14 @@ export class SubMenuComponent implements OnInit, AfterContentInit {
 
   collapsed = false;
 
+  popoverOpen = false;
+
   constructor() {
     // 如果不在constructor里，takeUntilDestroyed就得传入 destroyRef = inject(DestroyRef);
     this.parentMenu.collapsed$.pipe(takeUntilDestroyed()).subscribe(res => {
       // console.log('parentMenu.collapsed$', res, this.open);
       this.collapsed = res;
-      if (res) {
-        this.toggleOpen(false);
-      }
+      this.togglePopOpen(false);
       this.cdr.markForCheck();
     });
 
@@ -124,7 +124,7 @@ export class SubMenuComponent implements OnInit, AfterContentInit {
         takeUntilDestroyed()
       ).subscribe(open => {
         // console.log('sub menu open', this.open, open);
-        this.toggleOpen(open);
+        this.togglePopOpen(open);
         this.submenuService.parentSubMenuService?.parentPopoverOpen$.next(open);
         this.cdr.markForCheck();
       });
@@ -168,6 +168,12 @@ export class SubMenuComponent implements OnInit, AfterContentInit {
     }
   }
 
+  togglePopOpen(open: boolean) {
+    if (open !== this.popoverOpen) {
+      this.popoverOpen = open;
+    }
+  }
+
   get expandState() {
     return this.open ? 'expanded' : 'collapsed';
   }