diff --git a/src/components/menu/nz-menu.component.spec.ts b/src/components/menu/nz-menu.component.spec.ts index 885a88c9263..123b5f814b3 100644 --- a/src/components/menu/nz-menu.component.spec.ts +++ b/src/components/menu/nz-menu.component.spec.ts @@ -188,6 +188,26 @@ describe('NzMenuComponent', () => { // const debugElement4 = fixture.debugElement.query(By.directive(NzSubMenuComponent)); // expect(debugElement4.nativeElement.classList.contains('ant-menu-submenu-open')).toBe(true); }) + + it('should apply class based on sub-items select state', () => { + const fixture = TestBed.createComponent(TestMenuSubMenu); + const testComponent = fixture.debugElement.componentInstance; + const debugElement = fixture.debugElement.query(By.directive(NzSubMenuComponent)); + expect(debugElement).toBeDefined(); + + testComponent._mode = 'vertical'; + testComponent.selectOne = false; + fixture.detectChanges(); + const debugElement1 = fixture.debugElement.query(By.directive(NzSubMenuComponent)); + expect(debugElement1.nativeElement.classList.contains('ant-menu-submenu-selected')).toBe(false); + + testComponent._mode = 'vertical'; + testComponent.selectOne = true; + fixture.detectChanges(); + const debugElement2 = fixture.debugElement.query(By.directive(NzSubMenuComponent)); + expect(debugElement2.nativeElement.classList.contains('ant-menu-submenu-selected')).toBe(true); + + }) }); }); @@ -238,7 +258,7 @@ class TestMenuTheme {
  • Navigation One
  • @@ -255,6 +275,7 @@ class TestMenuSubMenu { isTestOpen = true; isOpenOne = false; isOpenTwo = false; + selectOne = false; openChange(value) { if (!this.isTestOpen) { diff --git a/src/components/menu/nz-submenu.component.ts b/src/components/menu/nz-submenu.component.ts index ec555505a43..79fdf26290e 100644 --- a/src/components/menu/nz-submenu.component.ts +++ b/src/components/menu/nz-submenu.component.ts @@ -57,6 +57,13 @@ export class NzSubMenuComponent implements OnInit, OnDestroy, AfterViewInit { @Input() nzOpen = false; @Output() nzOpenChange: EventEmitter = new EventEmitter(); + get subItemSelected(): boolean { + return !!this.nzMenuComponent.menuItems.find(e => e.selected && e.nzSubMenuComponent === this); + } + get submenuSelected(): boolean { + return !!this.subMenus._results.find(e => e !== this && e.subItemSelected) + } + clickSubMenuTitle() { if ((this.nzMenuComponent.nzMode === 'inline') || (!this.isInDropDown)) { this.nzOpen = !this.nzOpen; @@ -106,12 +113,16 @@ export class NzSubMenuComponent implements OnInit, OnDestroy, AfterViewInit { return this.isInDropDown && (this.nzMenuComponent.nzMode === 'horizontal'); } - @HostBinding('class.ant-menu-submenu') get setMenuSubmenuClass() { return !this.isInDropDown; } + @HostBinding('class.ant-menu-submenu-selected') + get setMenuSubmenuSelectedClass() { + return this.submenuSelected || this.subItemSelected; + } + @HostBinding('class.ant-menu-submenu-vertical') get setMenuVerticalClass() { return (!this.isInDropDown) && (this.nzMenuComponent.nzMode === 'vertical');