12

以下是我安装 PrimeNG 的步骤：

  1. npm install primeng --save npm install primeui --save

  2. 更新Index.html：（我必须将目录primeng和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">`

  3. 更新test.component.ts：

    import {Calendar} from '../../assets/primeng/primeng';
....
export class TestComponent {
     dateValue:string;
}

  4. 更新test.component.html：

    <p-calendar formControlName="date"></p-calendar>

结果：页面上没有显示任何内容。

我错过了什么吗？

编辑1：

  1. 我现在认为重要的是说我使用angular-cli安装了项目
  2. 如果我添加<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 (Not Found)
Error: Error: XHR error (404 Not Found) loading http://localhost:3000/primeng/primeng (...)

在此处输入图像描述

4

9 回答 9

16

将您的映射更新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';

如需进一步参考，我建议您查看PrimeNG 的设置

于 2016-07-01T09:11:54.113 回答
5

请参阅文档页面底部

依赖关系 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 文件）。
于 2016-07-01T07:31:53.040 回答
4

嘿，这是最新的primeng angular cli快速入门项目，看看。

https://github.com/primefaces/primeng-quickstart-cli

于 2016-11-29T11:53:41.860 回答
1

尝试在 index.html 中添加 primeui-ng-all.min.js

<!-- JS for PrimeUI -->
<script src="node_modules/primeui/primeui-ng-all.min.js"></script>

看看这是否有帮助。

于 2016-07-01T07:58:15.683 回答
0

你必须在 module.ts 文件中添加你的导入，否则 Angular 会忽略它。

于 2016-12-08T17:08:38.110 回答
0

安装 PrimeNG

npm install primeng --save

在此处输入图像描述

安装 Prime 图标

npm install primeicons --save

在此处输入图像描述

安装字体真棒

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

于 2020-02-06T10:44:46.747 回答
0

在 app.module.ts 中添加 import CalendarModule

@NgModule({  imports: [
CommonModule,
CalendarModule],  declarations: [CarruselComponent],  exports: [    CarruselComponent ]})
于 2017-05-03T11:52:26.493 回答
0

这是 Primeng 设置的完整文档：https ://www.primefaces.org/primeng/#/setup

这里我们如何添加日历：https ://www.primefaces.org/primeng/#/calendar

于 2020-01-10T06:45:38.523 回答
0

您必须首先使用 npm 命令安装日历，然后将其分两部分添加到您的模块文件中，导入和导出。

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CalendarModule,
    FormsModule
  ],
    exports: [CalendarModule,],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

于 2021-12-15T07:42:19.593 回答