Angular Material 6菜单仅在左上角打开问题求助

我之前在升级Angular Material到6.x版本时也碰到过一模一样的问题——原本绑定在触发按钮旁边的菜单突然跑到左上角去了，折腾了好一阵才找到根源。结合你的情况，给你几个针对性的解决思路：

1. 显式指定菜单的定位方向 #

Angular Material 6对菜单的定位策略做了调整，默认的定位逻辑可能因为样式冲突或依赖问题没有生效。你可以尝试给mat-menu显式添加定位属性，强制它基于触发按钮定位：

<button mat-fab color="primary" [matMenuTriggerFor]="menu">Menu</button>
<mat-menu class="myMenu" #menu="matMenu" 
          [matMenuPositionX]="'after'" 
          [matMenuPositionY]="'below'">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

after和below是默认的定位值，但显式声明后会强制触发Material内置的定位计算，避免因为升级后的样式优先级问题导致偏移。

2. 排查全局样式冲突 #

升级后Material的.mat-menu-panel默认样式可能被你的全局CSS覆盖了。比如你之前添加的临时position: absolute其实是跳过了Material的定位逻辑，反而可能加剧问题。建议检查你的全局样式，移除对.mat-menu-panel或.myMenu的自定义定位，恢复Material的默认样式：

/* 不要这样写，会破坏Material的定位逻辑 */
/* .myMenu { position: absolute; ... } */

/* 如果需要自定义菜单样式，只修改非定位相关的属性 */
.myMenu .mat-menu-item {
  color: #333;
  padding: 0 20px;
}

3. 确保依赖版本完全兼容 #

你当前的版本组合（angular@6.0.2、material@6.0.2、cli@6.0.3）基本匹配，但Angular CLI 6.0.3存在一些已知的样式编译小问题。建议把CLI升级到6.x的最新稳定版（6.0.8），同时重新安装依赖确保没有缓存问题：

# 升级CLI
npm install @angular/cli@6.0.8 --save-dev
# 清理依赖缓存并重新安装
rm -rf node_modules package-lock.json
npm install

4. 确认OverlayModule依赖正确导入 #

MatMenu组件依赖Angular CDK的OverlayModule，虽然MatMenuModule已经导出了OverlayModule，但在升级过程中有时候依赖注入会出现异常。尝试在你的AppModule中显式导入OverlayModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { OverlayModule } from '@angular/cdk/overlay';
import { MatMenuModule } from '@angular/material/menu';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    OverlayModule, // 显式导入
    MatMenuModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

为什么5.x版本正常？ #

Angular Material 5到6的升级中，对Overlay组件进行了重构，定位逻辑从基于触发元素的相对定位改为基于全局Overlay容器的绝对定位。旧版本的样式或隐式依赖在新版本中不再生效，导致菜单默认定位到左上角（绝对定位的初始位置）。

你的临时CSS方案虽然能暂时解决问题，但会导致菜单在响应式布局下（比如不同屏幕尺寸、触发按钮位置变化时）出现适配问题，建议优先尝试上面的官方方案修复。

内容的提问来源于stack exchange，提问作者Cliff Smith