关于angular：Angular2添加PrimeNG组件


Angular2 add PrimeNG component

这是我安装PrimeNG的步骤：

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

  • 更新Index.html ：(我不得不将node_modules目录的primeng和primeui复制到资产文件夹中，以摆脱未找到404文件的错误)

    1
    2
    3
    4
    5
    <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：

    1
    2
    3
    4
    5
    import {Calendar} from '../../assets/primeng/primeng';
    ....
    export class TestComponent {
         dateValue:string;
    }

  • 更新test.component.html：

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

    • Result: nothing gets shown on page.

    我想念什么吗？

    编辑1：

  • 我现在认为说我使用angular-cli安装该项目很重要
  • 如果将添加到test.component.html，我得到

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

    • 编辑2：

    我只是在另一个不使用angular-cli的项目中尝试过：

    1
    2
    3
    4
    5
    6
        <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(…)

    enter image description here

    相关讨论

    将SystemJS中的映射更新为以下内容：

    1
    2
    3
    4
    5
    6
    7
    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中的软件包更新为以下内容：

    1
    2
    3
    4
    5
    6
    var packages = {
     'app':                        { main: 'boot.js',  defaultExtension: 'js' },
     'rxjs':                       { defaultExtension: 'js' },
     'angular2-in-memory-web-api': { defaultExtension: 'js' },
     'primeng':                    { defaultExtension: 'js' } //<-- add this
    };

    对于导入，您可以使用以下命令：

    1
    import {Calendar} from 'primeng/components/calendar/calendar';

    或者，如果您不关心它会加载所有组件，则可以使用：

    1
    import {Calendar} from 'primeng/primeng';

    为了进一步参考，我建议您看一下PrimeNG的设置

    请参阅文档页面底部

    Dependencies
    jQuery UI Datepicker and DateTimePicker

    所以您必须将这些行嵌入到您尚未嵌入的index.html中，我想尝试使用此行

    1
    2
    3
    <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 src="//code.jquery.com/ui/1.11.4/jquery-ui.js">

    也不要忘记在@component下的指令列表中列出日历

    更新资料

    • 将您所有primeng的css文件从index.html移到angular-cli.json文件。像这样

      1
      2
      3
      4
      5
      "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文件)。
    相关讨论

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

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

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

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

    看看是否有帮助。

    相关讨论

    安装PrimeNG

    1
    npm install primeng --save

    enter image description here

    安装Prime图标

    1
    npm install primeicons --save

    enter image description here

    安装真棒字体

    1
    npm install font-awesome --save

    enter image description here

    安装Angular CDK

    1
    npm install @angular/cdk --save

    enter image description here

    如果现在转到package.json，我们将看到以下primeng依赖项
    enter image description here

    打开angular.json并在样式部分添加以下内容

    1
    2
    3
    "./node_modules/primeicons/primeicons.css",
     "./node_modules/primeng/resources/themes/nova-light/theme.css",
     "./node_modules/primeng/resources/primeng.min.css",

    enter image description here

    在Angular应用程序中添加PrimeNG组件
    要在Angular中添加任何PrimeNG组件，我们将按照以下步骤操作：
    enter image description here

    参考-https://www.codeusingjava.com/angular/primeng/prime1
    参考-https://youtu.be/4Wk4RgYN9ZQ

    这是Primeng安装程序的完整文档：https://www.primefaces.org/primeng/#/setup

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

    在app.module.ts中添加导入CalendarModule

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

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