Ag-Grid 表格在 Angular 应用中渲染后高度为 0px，根本原因通常是样式未正确全局注入——ag-Grid 的核心布局依赖（如 .ag-root、.ag-tab-guard 等）需通过 styles.scss 全局引入，而非组件级 SCSS 文件。
ag-grid 表格在 angular 应用中渲染后高度为 0px，根本原因通常是样式未正确全局注入——ag-grid 的核心 layout 依赖（如 `.ag-root`、`.ag-tab-guard` 等）需通过 styles.scss 全局引入，而非组件级 scss 文件。
在 Angular 12 + Bootstrap 5 项目中集成 ag-Grid 时，若表格容器显示为空白或高度塌陷（Chrome DevTools 可见
ag-Grid 是一个高度依赖 CSS-in-JS 与关键 CSS 规则（尤其是 display: flex、height: 100%、contain: layout 等）的复杂网格库。其内部尺寸计算（如自动高度、虚拟滚动容器、tab guard 定位）严格依赖以下全局样式规则：
- .ag-root 必须具有明确的高度上下文（非 height: auto）
- .ag-body, .ag-body-viewport 依赖父级 flex 布局与 overflow: hidden
- .ag-tab-guard 等辅助元素需可渲染且参与流式布局
而当你将 ag-Grid 的 SCSS 主题（如 @import '~ag-grid-community/styles/ag-grid.scss'; 或 @import '~ag-grid-community/styles/ag-theme-alpine.scss';）仅写入组件的 SCSS 文件（如 my-grid.component.scss）时，Angular 的默认 ViewEncapsulation.Emulated 机制会为样式添加属性选择器（如 _ngcontent-ng-c123），导致这些关键布局规则无法匹配 ag-Grid 动态生成的 DOM 节点——结果就是容器高度无法被正确计算，最终渲染为 0px。
✅ 正确做法：将 ag-Grid 样式全局注入到应用根样式文件中：
// src/styles.scss /* 必选：基础样式（含 .ag-root, .ag-body 等布局规则） */ @import '~ag-grid-community/styles/ag-grid.scss'; /* 可选：主题样式（如 Alpine、Balham）*/ @import '~ag-grid-community/styles/ag-theme-alpine.scss'; /* 或使用深色主题 */ /* @import '~ag-grid-community/styles/ag-theme-alpine-dark.scss'; */ /* ⚠️ 注意：不要在这里 import 组件专属样式，保持此文件专注全局 UI 基础 */
同时，确保 angular.json 中已将 styles.scss 正确声明为全局样式入口：
"styles": [ "src/styles.scss" ],
此外，HTML 模板中应显式设置 容器高度（因 ag-Grid 默认不自动撑满父容器）：
<div class="container-fluid h-100"> <ag-grid-angular class="ag-theme-alpine w-100 h-100" async></ag-grid-angular> </div>
配合 Bootstrap 5 的 h-100 工具类，并为
? 关键注意事项：
- ❌ 不要将 @import '~ag-grid-community/styles/...' 放入任何 *.component.scss；
- ✅ 所有 ag-Grid 相关 SCSS 必须在 styles.scss（或通过 angular.json 引入的其他全局样式文件）中导入；
- ✅ 若使用 CSS Modules 或 Tailwind，请额外确认 ag-* 类未被 PurgeCSS 误删（检查构建后 CSS 是否包含 .ag-root 等规则）；
- ✅ 开发时可通过 DevTools 检查 .ag-root 元素是否拥有 height 和 display: flex；若缺失，即为样式未加载。
总结：ag-Grid 的“零高”问题本质是 CSS 作用域隔离引发的布局断裂。解决它不靠调试 TypeScript 或模板逻辑，而在于尊重其样式架构设计——将核心样式视为运行时基础设施，而非组件装饰。全局注入 + 显式容器高度控制，即可稳定启用全部功能。
