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>
   

Result: nothing gets shown on page.

我错过了什么吗？

---

编辑1:

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

   Error: Uncaught (in promise): Cannot assign to a reference or variable!

---

编辑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(…)

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

如需进一步引用，我建议您查看 setup of PrimeNG