Angular2添加PrimeNG组件

Question

以下是我安装PrimeNG的步骤:

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

2. 更新Index.html :(我必须将目录primeng和primeui从node_modules复制到assets文件夹以摆脱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>
   

结果:页面上没有显示任何内容.

我错过了什么吗？

---

EDIT1:

1. 我现在认为说使用angular-cli安装项目很重要
2. 如果我添加<p-calendar [(ngModel)]="dateValue"></p-calendar>到test.component.html,我得到

   错误:未捕获(在承诺中):无法分配给引用或变量!

---

EDIT2:

我只是在另一个没有使用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(...)

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文件).