要在JHipster应用程序(Angular 7 + Webpack 4)中使用Ag-grid,需要按照以下步骤进行设置:
安装Ag-grid依赖项:
npm install --save ag-grid-angular ag-grid-community
在src/main/webapp/app/shared/shared-libs.module.ts
文件中导入Ag-grid模块:
import { AgGridModule } from 'ag-grid-angular';
在src/main/webapp/app/shared/shared-libs.module.ts
文件的imports
数组中添加Ag-grid模块:
imports: [
// ...
AgGridModule.withComponents([])
]
在需要使用Ag-grid的组件文件(例如src/main/webapp/app/entities/foo/foo.component.ts
)中导入Ag-grid模块:
import { AgGridAngular } from 'ag-grid-angular';
在组件类中声明Ag-grid的配置项和数据:
export class FooComponent implements OnInit {
gridOptions: any;
rowData: any[];
constructor() {
this.gridOptions = {
// 配置项
};
this.rowData = [
// 数据
];
}
ngOnInit() {
}
}
在组件的HTML模板中添加Ag-grid标记,并使用绑定属性绑定配置项和数据:
确保在组件的CSS文件中引入Ag-grid的样式:
@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham.css";
运行应用程序并查看Ag-grid是否正确渲染。
注意:上述步骤中的路径和文件名可能根据你的项目结构而有所不同,请根据实际情况进行调整。