我们一直试图将PrimeNG组件合并到JHipster(角度4)生成的项目中,但没有成功。下载并将PrimeNG安装到我们的项目中后,我们可以导入类,但是当我们将相应的标记包含到模板中时,不会绘制任何内容。我们测试了几种PrimeNG组件。我们还在app.module等中完成了导入。我希望更具体,但不会在任何地方显示错误。你对PrimeNG和JHipster的合作方式有什么暗示吗? 感谢
答案 0 :(得分:18)
以下步骤对我们有用。
1 - 使用yarn
yarn add primeng
yarn add @angular/animations
2 - 使用ng cli创建新组件,站在要创建组件运行的同一文件夹中
ng g component new-cmp
这将
new-cmp
和.html
创建一个.ts
文件夹。home.module.ts
3 - 在我们的案例中imports
添加您要使用的主要组件的BrowserAnimationsModule
以及宣布新组件的模块上的home.module.ts
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {AccordionModule, RatingModule, CalendarModule, ButtonModule } from 'primeng/primeng';
1}}例如:
src/main/webapp/content/scss/vendor.scss
AND 将它们添加到@NgModule
内的进口数组中 4 - 转到@import '~primeng/resources/primeng.min.css';
@import '~primeng/resources/themes/bootstrap/theme.css';
并导入样式,例如Marcin Krajewski建议:
<button pButton type="button" label="Click"></button>
5 - 在创建的组件的html中添加一个主要组件进行测试,例如yarn run webpack:build
6 - 运行vendors.scss
,以便应用从yarn start
7 - 运行document.addEventListener("scroll", scrollTracking);
function scrollTracking() {
var scroll25 = false;
// Get client heights, 100%, 25% and 50%
var clientHeight = document.body.clientHeight;
var perc25 = clientHeight * .25;
var perc50 = clientHeight * .50;
console.log('25%: ' + perc25 + ', 50%: ' + perc50);
// Log scroll position from top of document.
var scrollTop = document.body.scrollTop;
console.log(scrollTop);
// If scroll is within the clientHeight range of 25% - 50%, log
// message once.
if (scrollTop >= perc25 && scrollTop < perc50 && !scroll25) {
console.log("25% Reached. Success.");
scroll25 = true;
}
}
并测试一下!
<强>更新强> Jhipster版本:4.5.2
答案 1 :(得分:5)
我刚刚让PrimeNG与JHipster 4.4.1合作(使用Angular4和SCSS)。
朱利安上面的评论,以及马辛关于vendor.css
的回答,结合起来为你提供了解决方案。然而,作为JHipster的新手,即使在阅读了这个帖子之后,我也花了几次尝试将它们正确地组合在一起。
所以,澄清一下,这对我有用:
<强> 1。安装PrimeNG和依赖项
运行yarn add primeng
以安装PrimeNG作为您应用的依赖项。
运行yarn add @angular/animations
(有关此问题的解释,请参阅PrimeNG Setup Guide。)
<强> 2。将PrimeNG样式添加到您的应用
不是使用.angular-cli.json
将样式添加到构建中,而只需在@import
(或vendor.scss
)vendor.css
中添加样式。对我来说,这意味着在content/scss/vendor.scss
:
@import 'node_modules/primeng/resources/primeng.min';
@import 'node_modules/primeng/resources/themes/bootstrap/theme';
运行yarn run webpack:build:vendor
。
如果像我一样,你的构建因为找不到一些图像文件而失败,我只需将node_modules/primeng/resources/images/
目录复制到content/scss/
即可解决问题。也许某人有更“正确”的方法来解决这个问题,但这种解决方法对我有用。
第3。确保动画包含在您的模块中
如果它们还没有,请确保您在任何将使用PrimeNG的模块中导入动画(我在我的根模块上执行此操作):
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
不要忘记将其添加到@NgModule imports
数组。
<强> 4。开始使用PrimeNG!
现在一切都应该连线 - 只需按照PrimeNG的文档导入并使用他们的组件。
即。 import { AccordionModule } from 'primeng/primeng'
(也添加到@NgModule imports
)。
答案 2 :(得分:4)
这是一个适用于其他模块(angular-calendar
)的解决方案,它从node_modues
目录导入样式
添加到文件:
vendor.css:
@import "~angular-calendar/dist/css/angular-calendar.css";
并运行
yarn run webpack:build:vendor
答案 3 :(得分:1)
PrimeNG 6的更新
在此处遵循主要答案,但还需要添加primeicons依赖项。 See my answer here for more info
yarn add primeicons
vendor.css
中添加@import '~primeicons/primeicons.css';
(不确定导入顺序是否重要)