fix(module:dropdown): fix menu group style in dropdown

close #4505
NG-ZORRO · Feb 4, 2020 · d928a8c · d928a8c
1 parent 9f951f8
commit d928a8c
Showing 1 changed file with 28 additions and 4 deletions.
diff --git 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: `
-    <div class="ant-menu-item-group-title" #titleElement>
+    <div
+      [class.ant-menu-item-group-title]="!isMenuInsideDropDown"
+      [class.ant-dropdown-menu-item-group-title]="isMenuInsideDropDown"
+      #titleElement
+    >
       <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
       <ng-content select="[title]" *ngIf="!nzTitle"></ng-content>
     </div>
@@ -36,14 +54,20 @@ export class NzMenuGroupComponent implements AfterViewInit {
   @Input() nzTitle: string | TemplateRef<void>;
   @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);
     }
   }
 }