Angular Material 14 mat-sidenav-content内容不显示问题求助

该问题与路由配置逻辑无关，属于Angular Material Sidenav组件的典型布局异常，你观测到的1920px偏移margin是组件布局计算失败的典型特征，按以下优先级排查修复即可：

• 第一优先级：修复容器高度缺失问题
  mat-sidenav-container 必须设置明确的高度值，否则组件内部的位置计算逻辑会出现异常，将内容区偏移到视口可视范围之外。直接在wrapper.component.css或全局样式文件中添加以下样式规则：

mat-sidenav-container {
  height: 100vh;
  width: 100%;
}

mat-sidenav-content {
  padding: 1rem;
  overflow: auto;
}

添加后强制刷新页面，异常的1920px margin会自动消失，路由加载的组件内容会正常渲染在右侧内容区。

• 第二优先级：验证核心依赖与样式导入
  如果上述样式添加后仍不显示，逐一检查以下配置：
  1. 确认angular.json的build.options.styles数组中已经引入Angular Material预构建主题，未引入主题时组件所有布局样式都会失效，示例配置：

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

  2. 确认根模块已经导入BrowserAnimationsModule，Sidenav组件依赖动画模块完成位置计算，缺失该模块会导致布局逻辑完全异常。
• 第三优先级：排查自定义样式冲突
  检查项目中的自定义CSS，重点排查：
  1. 是否给html、body或者通配符*设置了影响定位的transform、position属性、异常的margin/padding重置规则
  2. 是否给mat-sidenav、mat-sidenav-content类设置了固定宽度、脱离文档流的定位属性，覆盖了组件默认布局规则
• 额外路由配置优化建议
  当前侧边栏模板中存在多个指向/default-route、/some-route的无效路由链接，这些路径未在路由表中定义，会触发通配符重定向规则，建议先替换为已声明的/dashboard、/about、/login路径，排除路由跳转异常的干扰。

内容的提问来源于stack exchange，提问作者Adrian Mangion