如何在PrimeNG 6+中使用JHipster 5+ [英] How to use JHipster 5+ with PrimeNG 6+

问题描述

我尝试过:

• PrimeNG官方入门指南
• 将PrimeNG与JHipster集成的步骤(很抱歉，如果重复的话帖子，那里没有任何人对此发表评论)
• generator-jhipster-primeng

• official getting started guide for PrimeNG
• Steps to integrate PrimeNG with JHipster (sorry if this is a duplicate post, have no rep to comment there)
• generator-jhipster-primeng

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

and some other articles and stackoverflow posts with no luck on getting the latest PrimeNG 6+ to work with the latest JHipster 5+. It mostly works, but the styles are a bit off - mainly it seems like primeicons aren't working.

例如，我尝试了 primeng过滤器表示例，它主要是除了下拉箭头之类的图标显示为空白框，以及其他未正确显示的框之外，其他方法均可用.我怀疑这可能与Primeicons无法正确导入有关?

For example, I tried the primeng filter table example and it mostly works except the icons such as the dropdown arrows appear as empty boxes as well as others not appearing correctly. I suspect this may have to do with primeicons not importing correctly?

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

Has anyone got this to work? I tested using a fresh install of everything but I can post code if really needed.

推荐答案

对不起，这对我有用，我刚开始使用generator-jhipster-primeng，但该功能开箱即用. 此处的步骤大多有效，只需包含基本图标即可.无论如何，我还是在下面列出了完整的说明.

Sorry guys it's working for me, I just got tripped up on using generator-jhipster-primeng which doesn't work out of the box. Steps here mostly work, just have to include primeicons. I included full directions below anyways.

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

However, the layout/css styles are still somewhat off (maybe they conflict with JHipster/bootstrap) and you'll have to tweak some of the official PrimeNG examples, such as using <fa-icon> instead of old <i> style icons.

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

Steps to integrate PrimeNG into JHipster project:

• yarn add primeicons primeng @angular/animations
• 可能需要为动画使用相同版本的Angular core，以避免出现问题

在vendor.css(如果使用Sass，则为vendor.scss)中添加:

In vendor.css (or vendor.scss if you use Sass) add:

@import '~primeicons/primeicons.css';
@import '~primeng/resources/themes/nova-light/theme.css'; // pick whatever theme
@import '~primeng/resources/primeng.min.css'

• 请注意，引导主题布局特别关闭.其他主题可以在node_modules/primeng/resources/themes
中找到
• Notice the bootstrap theme layout is especially off. Other themes are found in node_modules/primeng/resources/themes
• 我在app.module.ts中添加了BrowserAnimationsModule，但是您可以仅在需要的地方添加它:
  • import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  • 将BrowserAnimationsModule添加到@NgModule也会导入数组
  • I added BrowserAnimationsModule to app.module.ts but you may be able to just add it where needed:
    • import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    • Add BrowserAnimationsModule to @NgModule imports array as well

    就是这样！现在，请按照PrimeNG文档的说明使用特定组件.

    And that's it! Now follow PrimeNG docs for using specific components.

    已通过jhipster 5.2.1，primeng 6.1.2和primeicons 1.0.0-beta.10

    Tested with jhipster 5.2.1, primeng 6.1.2, and primeicons 1.0.0-beta.10

    这篇关于如何在PrimeNG 6+中使用JHipster 5+的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！