如何在PrimeNG 6+中使用JHipster 5+

Question

我尝试过：

• official getting started guide for PrimeNG
• Steps to integrate PrimeNG with JHipster（很抱歉，如果这是重复的帖子，则没有人在此发表评论）
• generator-jhipster-primeng

以及其他一些文章和stackoverflow帖子，都没有使最新的PrimeNG 6+与最新的JHipster 5+一起使用的运气。它主要是有效，但样式有些偏离-主要是看来primeicons不起作用。

例如，我尝试了primeng filter table example，并且它除其他图标（例如，下拉箭头）显示为空框以及其他图标未正确显示外，大多数情况下都有效。我怀疑这可能与Primeicons无法正确导入有关？

有人有这个工作吗？我使用所有内容的全新安装进行了测试，但是如果确实需要，我可以发布代码。

Answer 1

对不起，它对我有用，我刚开始使用generator-jhipster-primeng，但这种方法无法立即使用。步骤here通常有效，只需要包含基本图标即可。无论如何，我还是在下面列出了完整的说明。

但是，布局/ css样式仍然有些偏离（也许与JHipster / bootstrap冲突），您必须调整一些正式的PrimeNG示例，例如使用{{1 }}，而不是旧的<fa-icon>样式图标。

将PrimeNG集成到JHipster项目中的步骤：

1。添加依赖项

• <i>
• 可能需要为动画使用相同版本的Angular core，以避免出现问题

2。导入CSS样式

在yarn add primeicons primeng @angular/animations（如果使用Sass，则为vendor.css）中添加：

vendor.scss

• 请注意，引导主题布局特别关闭。其他主题可以在@import '~primeicons/primeicons.css'; @import '~primeng/resources/themes/nova-light/theme.css'; // pick whatever theme @import '~primeng/resources/primeng.min.css'
中找到

3。导入模块

• 我在node_modules/primeng/resources/themes中添加了BrowserAnimationsModule，但是您可以只在需要的地方添加它：
  • app.module.ts
  • 将import { BrowserAnimationsModule } from '@angular/platform-browser/animations';添加到BrowserAnimationsModule也会导入数组
• 根据需要导入任何PrimeNG模块（请参见其示例中的文档）

---

就是这样！现在请按照PrimeNG文档使用特定组件。

已通过@NgModule，jhipster 5.2.1和primeng 6.1.2进行了测试