From d928a8c61340e76f351831325fe126900f06f760 Mon Sep 17 00:00:00 2001 From: vthinkxie Date: Wed, 29 Jan 2020 16:52:21 +0800 Subject: [PATCH] fix(module:dropdown): fix menu group style in dropdown close #4505 --- components/menu/menu-group.component.ts | 32 +++++++++++++++++++++---- 1 file changed, 28 insertions(+), 4 deletions(-) diff --git a/components/menu/menu-group.component.ts b/components/menu/menu-group.component.ts index 3ee8c15d15b..e3e081e9444 100644 --- a/components/menu/menu-group.component.ts +++ b/components/menu/menu-group.component.ts @@ -11,20 +11,38 @@ import { ChangeDetectionStrategy, Component, ElementRef, + Inject, Input, + Optional, Renderer2, + SkipSelf, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; +import { NzIsMenuInsideDropDownToken } from './menu.token'; @Component({ selector: '[nz-menu-group]', exportAs: 'nzMenuGroup', changeDetection: ChangeDetectionStrategy.OnPush, + providers: [ + /** check if menu inside dropdown-menu component **/ + { + provide: NzIsMenuInsideDropDownToken, + useFactory: (isMenuInsideDropDownToken: boolean) => { + return isMenuInsideDropDownToken ? isMenuInsideDropDownToken : false; + }, + deps: [[new SkipSelf(), new Optional(), NzIsMenuInsideDropDownToken]] + } + ], encapsulation: ViewEncapsulation.None, template: ` -
+
{{ nzTitle }}
@@ -36,14 +54,20 @@ export class NzMenuGroupComponent implements AfterViewInit { @Input() nzTitle: string | TemplateRef; @ViewChild('titleElement') titleElement: ElementRef; - constructor(public elementRef: ElementRef, private renderer: Renderer2) { - this.renderer.addClass(elementRef.nativeElement, 'ant-menu-item-group'); + constructor( + public elementRef: ElementRef, + private renderer: Renderer2, + @Inject(NzIsMenuInsideDropDownToken) public isMenuInsideDropDown: boolean + ) { + const className = this.isMenuInsideDropDown ? 'ant-dropdown-menu-item-group' : 'ant-menu-item-group'; + this.renderer.addClass(elementRef.nativeElement, className); } ngAfterViewInit(): void { const ulElement = this.renderer.nextSibling(this.titleElement.nativeElement); if (ulElement) { /** add classname to ul **/ - this.renderer.addClass(ulElement, 'ant-menu-item-group-list'); + const className = this.isMenuInsideDropDown ? 'ant-dropdown-menu-item-group-list' : 'ant-menu-item-group-list'; + this.renderer.addClass(ulElement, className); } } }