Angular2 添加 PrimeNG 组件
Posted
技术标签:
【中文标题】Angular2 添加 PrimeNG 组件【英文标题】:Angular2 add PrimeNG component 【发布时间】:2016-11-03 11:34:34 【问题描述】:以下是我安装 PrimeNG 的步骤:
npm install primeng --save npm install primeui --save
更新 Index.html:(我必须将目录 primengem> 和 primeui 从 node_modules 复制到 assets文件夹以摆脱 404 file not found 错误)
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/flatly/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="assets/styles.css">
<link rel="stylesheet" href="assets/primeui/themes/omega/theme.css">
<link rel="stylesheet" href="assets/primeui/primeui-ng-all.min.css">`
更新test.component.ts:
import Calendar from '../../assets/primeng/primeng';
....
export class TestComponent
dateValue:string;
更新test.component.html:
<p-calendar formControlName="date"></p-calendar>
结果:页面上没有显示任何内容。
我错过了什么吗?
编辑1:
-
我现在认为重要的是说我使用 angular-cli 安装了项目
如果我将
<p-calendar [(ngModel)]="dateValue"></p-calendar>
添加到 test.component.html ,我会得到
错误:未捕获(承诺中):无法分配给引用或变量!
编辑2:
我刚刚在另一个没有使用 angular-cli 的项目中尝试过:
<link rel="stylesheet" href="node_modules/primeui/themes/omega/theme.css" />
<link rel="stylesheet" href="node_modules/primeui/primeui-ng-all.min.css" />
....
import Calendar from 'primeng/primeng';
....
<p-calendar formControlName="date"></p-calendar>
我一添加 directives:[Calendar]
就会收到错误:
http://localhost:3000/primeng/primeng 404(未找到) 错误:错误:XHR 错误 (404 Not Found) loading http://localhost:3000/primeng/primeng(...)
【问题讨论】:
尝试导入为import Calendar from 'primeng/primeng';
并且您是否将Calendar
添加到@Component
声明的directives
数组中?
请检查我的Edit2。
你使用什么样的包管理器?因为如果你使用SystemJS
,你必须将primeng添加到映射'primeng': 'node_modules/primeng'
以及包'primeng': defaultExtension: 'js'
是的,我正在使用 system.js。我现在就试试,我在帖子中添加了一张图片。谢谢。
我尝试了同样的结果。 Here 是我的system.config.js
的副本,也许你现在可以添加一个完整的答案。
【参考方案1】:
将SystemJS
中的映射更新为如下内容:
var map =
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs',
'primeng': 'node_modules/primeng'//<-- add this
;
并将SystemJS
中的包更新为如下内容:
var packages =
'app': main: 'boot.js', defaultExtension: 'js' ,
'rxjs': defaultExtension: 'js' ,
'angular2-in-memory-web-api': defaultExtension: 'js' ,
'primeng': defaultExtension: 'js' //<-- add this
;
对于导入,您可以使用:
import Calendar from 'primeng/components/calendar/calendar';
或者如果您只是不关心它会加载您可以使用的所有组件:
import Calendar from 'primeng/primeng';
为了进一步参考,我建议您查看setup of PrimeNG
【讨论】:
【参考方案2】:见documentation页面底部
依赖项 jQuery UI Datepicker 和 DateTimePicker
所以您必须将这些行嵌入到您尚未嵌入的 index.html 中,我认为请尝试使用此
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
别忘了在@component 下的指令列表中列出日历
更新
将所有primeng的css文件从index.html
转移到angular-cli.json
文件。像这样
"styles": [
"../node_modules/font-awesome/css/font-awesome.css",
"../node_modules/primeui/primeui-ng-all.min.css"
....
],
将你所有的primeng js文件以及angular-cli.json文件移动。
到目前为止,primeng 的所有组件都在模块中转换,因此我们必须在主模块文件中导入所有组件。 (在我的例子中是 app.module.ts 文件)。【讨论】:
我也会尝试,但现在似乎最大的问题是我添加 [directive] 时的引用错误。我尝试再次将文件从 node_modules 复制到资产,更改了引用,同样的错误.. 这对我有用。将 js 文件的引用放在 scripts 数组中,如下所示: "scripts": [ "js/jquery-3.1.1.min.js", "js/primeui/primeui-ng-all.js" ],这允许索引。 html 完全干净,非常适合制作分发包。 @Kwexi 你知道如何使用 webpack 做到这一点吗?【参考方案3】:嘿,这是最新的primeng angular cli快速入门项目,看看吧。
https://github.com/primefaces/primeng-quickstart-cli
【讨论】:
【参考方案4】:尝试在 index.html 中添加 primeui-ng-all.min.js
<!-- JS for PrimeUI -->
<script src="node_modules/primeui/primeui-ng-all.min.js"></script>
看看这是否有帮助。
【讨论】:
@cris 请参阅此 github 链接 - github.com/primefaces/primeng-quickstart/blob/master/index.html 根据此 index.html,除了 PierreDuc 建议的答案外,您还需要在 primeui-ng-all.min.js 文件上方添加。这在 primeNG 设置页面中没有提到。 不建议在 index.html 文件中添加包,而是在angular.json
或 .angular-cli.json
文件中使用它【参考方案5】:
您必须在 module.ts 文件中添加您的导入,否则 Angular 会忽略它。
【讨论】:
【参考方案6】:在你的 app.module.ts 中添加 import CalendarModule
@NgModule( imports: [
CommonModule,
CalendarModule], declarations: [CarruselComponent], exports: [ CarruselComponent ])
【讨论】:
【参考方案7】:这是 Primeng 设置的完整文档:https://www.primefaces.org/primeng/#/setup
这里我们如何添加日历:https://www.primefaces.org/primeng/#/calendar
【讨论】:
【参考方案8】:安装 PrimeNG
npm install primeng --save
安装 Prime 图标
npm install primeicons --save
安装 Font Awesome
npm install font-awesome --save
安装 Angular CDK
npm install @angular/cdk --save
如果我们现在转到 package.json,我们将看到以下primeng依赖项
打开 angular.json 并在样式部分添加以下内容
"./node_modules/primeicons/primeicons.css",
"./node_modules/primeng/resources/themes/nova-light/theme.css",
"./node_modules/primeng/resources/primeng.min.css",
在 Angular 应用程序中添加 PrimeNG 组件 要在 Angular 中添加任何 PrimeNG 组件,我们将按照以下步骤操作 -
参考 - https://www.codeusingjava.com/angular/primeng/prime1参考 - https://youtu.be/4Wk4RgYN9ZQ
【讨论】:
【参考方案9】:必须先使用 npm 命令安装日历 然后分两部分将其添加到您的模块文件中,导入和导出。
@NgModule(
imports: [
BrowserModule,
BrowserAnimationsModule,
CalendarModule,
FormsModule
],
exports: [CalendarModule,],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
)
【讨论】:
以上是关于Angular2 添加 PrimeNG 组件的主要内容,如果未能解决你的问题,请参考以下文章
如何将自定义图标添加到 Angular2 primeng Tree
PrimeNG 元素没有作用域,不能使用默认的 Angular 2 ViewEncapsulation (Emulated) 设置样式