Angular2 添加 PrimeNG 组件

Question

以下是我安装 PrimeNG 的步骤：

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

2. 更新Index.html :（我不得不将目录primeng和primeui从 node_modules 复制到资产文件夹以摆脱 404文件未找到错误）

    <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（未找到）
错误：错误：XHR 错误（404 Not Found）正在加载http://localhost:3000/primeng/primeng (...)

Answer 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';

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

Answer 2

请参阅文档页面底部

依赖 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" .... ],

在 angular-cli.json 文件中移动所有的primeng js 文件。

• 截至目前，primeng 的所有组件都已转换为模块，因此我们必须导入主模块文件中的所有组件。 （在我的例子中是 app.module.ts 文件）。

Answer 3

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

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

Answer 4

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

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

看看这是否有帮助。

Answer 5

您必须将其添加到 module.ts 文件中，否则 Angular 会忽略它。

Answer 6

在 app.module.ts 中添加 import CalendarModule

@NgModule({  imports: [
CommonModule,
CalendarModule],  declarations: [CarruselComponent],  exports: [    CarruselComponent ]})

Answer 7

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

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

Answer 8

安装 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

Answer 9

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

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