Ag-Grid 在 Angular 中渲染高度为 0 的解决方案

ag-grid 表格在 angular 应用中渲染后高度为 0px，根本原因通常是样式未正确全局注入——ag-grid 的核心 layout 依赖（如 `.ag-root`、`.ag-tab-guard` 等）需通过 styles.scss 全局引入，而非组件级 scss 文件。

在 Angular 12 + Bootstrap 5 项目中集成 ag-Grid 时，若表格容器显示为空白或高度塌陷（Chrome DevTools 可见 <div class=”ag-tab-guard ag-tab-guard-top”> 高度为 0px），这并非数据绑定或响应式配置问题，而是 CSS 作用域与布局引擎失效 的典型表现。

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" [rowData]="rowData$ | async" [columnDefs]="columnDefs" [defaultColDef]="defaultColDef" [rowSelection]="’multiple’" (gridReady)="onGridReady($event)" > </ag-grid-angular></div>

配合 Bootstrap 5 的 h-100 工具类，并为 <ag-grid-angular> 添加 ag-theme-alpine 类（对应所引入的主题），确保 CSS 选择器生效。

? 关键注意事项：

❌ 不要将 @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 或模板逻辑，而在于尊重其样式架构设计——将核心样式视为运行时基础设施，而非组件装饰。全局注入 + 显式容器高度控制，即可稳定启用全部功能。