Angular 12中mat-menu的位置问题答案

【问题标题】：position problem with mat-menu in Angular 12Angular 12中mat-menu的位置问题
【发布时间】：2021-07-16 10:51:52
【问题描述】：

我创建了一个可以工作的垫子菜单（菜单出现），但它没有出现在使它出现的按钮下方...... 你知道如何解决这个问题吗？我应该使用 CSS 还是使用 npm install 中的组件来修复它？

list-members.component.html

<button mat-icon-button [matMenuTriggerFor]="menu">
 <mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu" yPosition="below" xPosition="after">
 <button mat-menu-item (click)="deleteMember(member.IdProjectMember)">
  <mat-icon>dialpad</mat-icon>
  <span>Supprimer le membre</span>
 </button>
</mat-menu>

list members img

app.module.ts

import { NgModule } from '@angular/core';
import { MatDialogModule, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';

@NgModule({
  exports:[
    MatDialogModule,
    MatInputModule,
    MatMenuModule,
    
  ],
  ...
  ],
  imports: [
    MatDialogModule,
    MatInputModule,
    MatMenuModule,

  ],
 
  providers: [
    {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}}
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

【问题讨论】：

检查您是否在angular.json 文件中的styles 属性下导入了主题。
我有这个：“styles”：[“src/styles.scss”]，

标签： html css angular position angular12

【解决方案1】：

尝试在angular.json中添加材质主题：

        "styles": [
          "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
          "src/styles.scss"
        ],

预建主题：https://material.angular.io/guide/theming#using-a-pre-built-theme

【讨论】：