Question

我正在努力让我的angular2项目工作，但还没有让它工作。

采取的步骤：

已安装：npm install primeng --save
添加到模块 import {DialogModule} from 'primeng/primeng'; @NgModule({... imports: [DialogModule, ...]});
将样式表添加到index.html
已添加到模板： <p-dialog header="Test" [(visible)]="display"> Content </p-dialog> 注意：组件中的display: boolean = false

我没有收到任何构建或运行时错误，当我点击设置display = true的按钮时没有任何反应。

在我的研究中，我看到了很多对webpack和system.js的反思，我必须对它进行映射。我无法找到这些文件，所以我不确定它是否适用于我。

编辑： angular-cli@1.0.0-beta.19-3

Answer 1

您只需要导入一个正确使用的模块。

你的cli.json应该是这样的。顺便说一句，这只是一个例子。

"styles": [
    "../node_modules/font-awesome/css/font-awesome.min.css",
    "../node_modules/primeng/resources/themes/omega/theme.css",
    "assets/layout/css/layout.css",
    "../node_modules/primeng/resources/primeng.min.css",
    "../node_modules/fullcalendar/dist/fullcalendar.min.css",
    "../node_modules/quill/dist/quill.snow.css",
    "../node_modules/nanoscroller/bin/css/nanoscroller.css",
    "../node_modules/animate.css/animate.css",
    "styles.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/chart.js/dist/Chart.js",
    "../node_modules/moment/moment.js",
    "../node_modules/fullcalendar/dist/fullcalendar.js",
    "../node_modules/quill/dist/quill.js",
  ],

Answer 2

您还必须将其添加到导出中（以使其对组件可见）：

@NgModule({
  imports: [ DialogModule],
  exports: [ DialogModule ]
})

Answer 3

采取的步骤可能会对您有所帮助，

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

"styles": [
    "../node_modules/font-awesome/css/font-awesome.css",
    "../node_modules/primeui/primeui-ng-all.min.css"
     ....
  ],

...

在html中打印变量display以确保绑定，并且默认情况下只需设置模态为true，就像这样
```
 <p-dialog header="Test" [(visible)]="true">....
```

Angular-CLI导入primeng

3 个答案: