Angular 5中如何引入ag-grid样式？解决网格显示异常

嘿，我之前在Angular 5搭配ag-grid 17.x的时候也踩过这个坑！你说的这种“网格没渲染成正常样式，只显示杂乱单列文本”的情况，90%都是因为ag-grid的主题样式没有正确引入导致的——毕竟ag-grid的样式是独立于组件逻辑的，没加载样式的话就只会显示原始的DOM文本，而且还不会报JS错误，确实容易让人摸不着头脑。

下面给你两种靠谱的样式引入方法，选一种就行：

方法一：通过Angular CLI全局配置（推荐） #

Angular 5使用的是.angular-cli.json配置文件，我们可以在这里全局引入ag-grid的基础样式和主题样式：

1. 打开项目根目录下的.angular-cli.json
2. 找到styles数组，添加ag-grid的样式文件路径：

"styles": [
  "styles.css",
  "../node_modules/ag-grid/dist/styles/ag-grid.css",
  "../node_modules/ag-grid/dist/styles/ag-theme-balham.css"
]

注意：如果你的node_modules目录和.angular-cli.json不在同一层级（比如项目有嵌套结构），要调整路径前缀，确保能正确找到文件。

配置完之后重启Angular CLI的开发服务（ng serve），让配置生效。

方法二：在index.html中直接引入样式 #

如果不想修改CLI配置，也可以直接在src/index.html的<head>标签里添加样式链接：

<head>
  <!-- 其他head内容 -->
  <link rel="stylesheet" href="node_modules/ag-grid/dist/styles/ag-grid.css">
  <link rel="stylesheet" href="node_modules/ag-grid/dist/styles/ag-theme-balham.css">
</head>

额外检查项 #

除了样式，还要确保这两点没问题：

• 你的模块已经正确导入AgGridModule：在app.module.ts里添加：

import { AgGridModule } from 'ag-grid-angular';

@NgModule({
  imports: [
    // ...其他导入的模块
    AgGridModule.withComponents([])
  ]
})
export class AppModule { }

• 组件里的rowData和columnDefs格式正确，比如：

export class YourComponent {
  // 列定义
  columnDefs = [
    { headerName: '姓名', field: 'name' },
    { headerName: '年龄', field: 'age' }
  ];

  // 行数据
  rowData = [
    { name: '张三', age: 25 },
    { name: '李四', age: 30 }
  ];
}

按照上面的步骤操作后，你的ag-grid应该就能正常渲染出带ag-theme-balham主题的样式了。

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