Angular2 添加 PrimeNG 组件

Posted 2023-03-13

【中文标题】Angular2 添加 PrimeNG 组件

【英文标题】：Angular2 add PrimeNG component

【发布时间】：2016-11-03 11:34:34

【问题描述】：

以下是我安装 PrimeNG 的步骤：

npm install primeng --save npm install primeui --save

更新 Index.html：（我必须将目录 primeng​​em> 和 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 ]
)