Question

我的大型菜单具有以下代码：

<button mat-button [matMenuTriggerFor]="objectmenu">Objects</button>
        <mat-menu #objectmenu="matMenu" >
              <div class="menu-content" [style.backgroundColor]="getUnSelectedRandomColor()" style="height: 550px;">
                <div  fxFlex="100" fxFlex.gt-sm="30" fxFlex.sm="45" class="dropdown-menu-items"> 
                  <div class="dropdown-menu-btns" *ngFor="let parent of (objectList$ | async)"
                   (mouseover)="openCategory($event, 
                   parent)"
                   [style.background-color] = "this.selectedColor === (parent.categoryId * 100)  ? getSelectedRandomColor() : getUnSelectedRandomColor()"

                   >{{parent.name}}</div>
              </div>
                    <div class="theme-container">

                    <div class="theme-container" style=" padding-bottom: 0px !important; padding-top: 7px !important;">
                      <div fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="center center" class="content border-lighter">
                        <div fxFlex="100" fxFlex.gt-sm="100" fxLayout="column" fxLayoutAlign="center center"> 
                            <h2 *ngIf="this.selectedCategory" class="uppercase">{{this.selectedCategory.name}}</h2>
                        </div>
                    </div>

                    <div class="content border-lighter" [style.backgroundColor]="getSelectedRandomColor()" style="height: 380px;">

                        <div fxLayout="row wrap" fxLayoutAlign="space-between"> 
                            <div fxFlex="100" fxFlex.gt-sm="70" fxFlex.sm="45" style="column-count: 2;"> 
                              <ul class="ht-dropdown megamenu-two d-flex"
                              *ngFor="let parent of (childCategories$ | async)" style="list-style: none;">

                               <label [routerLink]="['/products']" [queryParams]="{categories: parent.categoryId}"
                               routerLinkActive="router-link-active">{{parent.name}}</label>
                             <li *ngFor="let child of parent.childrenCategories"
                             [routerLink]="['/products']" [queryParams]="{categories: child.categoryId}"
                               routerLinkActive="router-link-active">
                               {{child.name}}

                           </li>
                         </ul>
                            </div>



                            <div fxFlex="100" fxFlex.gt-sm="30" ngClass.lt-md="pt-5" style="background-size: contain !important;"
                            [style.background]="selectedCategoryUrl"> 

                            </div>
                        </div> 

                    </div>


                    </div> 
                    <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between center" >
                      <img *ngFor="let brand of (relatedBrandsList$ | async)"  [src]=" brand.thumbnail | safeHtml" style="width: 110px; height: 110px; border-radius: 50%;"/>
                    </div>                     
                  </div>                    
                 </div>   


        </mat-menu>

，它给了我以下样式：

如图所示，菜单面板的顶部和底部边缘没有采用我通过getUnSelectedRandomColor（）方法在角度代码中生成的动态背景色。 getUnSelectedRandomColor（）方法如下：

openCategory(evt, category: Category) {
    this.selectedCategory = category;
    this.selectedCategoryUrl = `url('../../assets/categories/${category.categoryId}.webp')`;
    this.childCategories$ = this.store.pipe(select(getChildCategories(category.categoryId)));
    this.relatedBrandsList$ = this.store.pipe(select(getRelatedBrands(category.categoryId)));
    this.selectedColor = category.categoryId * 100;
    }

  getSelectedRandomColor() {
    const color = 'hsl(' + this.selectedColor + ', 30%, 75%)';
    return color;
    }
  getUnSelectedRandomColor() {
      const color = 'hsl(' + this.selectedColor + ', 30%, 86%)';
      return color;
    }

我该怎么做？

Answer 1

角度9

发生的事情是，您没有影响菜单面板项目，必须获取为MatMenu属性的panelId，并通过获取面板ID来获取元素，然后更改所需属性的值才能实现此目的您可以使用属性装饰器来配置视图查询ViewChild和服务Renderer2。

在这里，我向您展示一个示例，其中我根据发出鼠标悬停stackblitz的菜单项动态更改面板的背景。

import { Component, ViewChild, Renderer2 } from '@angular/core';
import { MatMenu } from '@angular/material/menu/';

@Component({
  selector: 'my-app',
  template: './app.component.html',
})
export class AppComponent {
  @ViewChild('menu', {static: true}) menu: MatMenu

  constructor(private _renderer2: Renderer2) {
  }

  changeBackgroundPanel(colorValue: string) {
    const el = document.getElementById(this.menu.panelId);
    this._renderer2.setStyle(el, 'background', colorValue);
  }
}

<button mat-raised-button [matMenuTriggerFor]="menu" color="primary">Open Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item (mouseover)="changeBackgroundPanel('blue')">Blue</button>
  <button mat-menu-item (mouseover)="changeBackgroundPanel('orange')">Orange</button>
  <button mat-menu-item (mouseover)="changeBackgroundPanel('red')">Red</button>
</mat-menu>

[Angular 8解决方案]

请参见此处的示例：stackblitz

组件：

import { Component, Renderer2 } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.scss' ]
})
export class AppComponent  {
  constructor(private _renderer2: Renderer2) {
  }

  changeBackgroundPanel(colorValue: string) {
    const el = document.getElementById('myPanelId');
    this._renderer2.setStyle(el, 'background', colorValue);
  }
}

HTML：

<button mat-raised-button [matMenuTriggerFor]="menu" color="primary">Open Menu</button>
<mat-menu #menu="matMenu">
  <div id="myPanelId" class="menu-panel">
    <button mat-menu-item (mouseover)="changeBackgroundPanel('blue')">Blue</button>
    <button mat-menu-item (mouseover)="changeBackgroundPanel('orange')">Orange</button>
    <button mat-menu-item (mouseover)="changeBackgroundPanel('red')">Red</button>
  </div>
</mat-menu>

CSS：

.menu-panel {
  margin: -8px 0; 
  padding: 8px 0;
}

Answer 2

最后我找到了答案：

::ng-deep .mat-menu-content{
            padding-top: 0px !important;
            padding-bottom: 0px !important;
          }

我使用上述样式去除了填充物，然后去除了白色缝隙

角材料；如何以编程方式更改菜单背景颜色？

2 个答案: