无法在 Angular 2 Webpack 应用程序中包含 PrimeNG答案

【问题标题】：Not able to include PrimeNG in Angular 2 Webpack app无法在 Angular 2 Webpack 应用程序中包含 PrimeNG
【发布时间】：2017-07-05 04:50:03
【问题描述】：

我正在使用 ng2-admin template 并尝试在其中包含 PrimeNG，但我正在努力添加它。

以下我在模板中所做的更改以包含 PrimeNG

./src/vendor.browser.ts：

// Prime faces: http://www.primefaces.org/primeng/#/setup
import 'primeng/primeng';

./src/app/app.module.ts：

import { ToggleButtonModule } from 'primeng/primeng';

@NgModule({
  bootstrap: [App],
  declarations: [
    App
  ],
  imports: [ // import Angular's modules
    ...
    ...
    ...
    ToggleButtonModule
  ],
  providers: [ // expose our Services and Providers into Angular's dependency injection
    ENV_PROVIDERS,
    APP_PROVIDERS
  ]
})

./src/app/pages/dashboard/dashboard.component.ts：

import { ToggleButtonModule } from 'primeng/primeng';

./src/app/pages/dashboard/dashboard.html：

<p-toggleButton [(ngModel)]="checked"></p-toggleButton>

我收到以下错误：

无法绑定到“ngModel”，因为它不是 'p-toggleButton'。

如果“p-toggleButton”是一个 Angular 组件并且它具有“ngModel”输入，则验证它是该模块的一部分。

如果“p-toggleButton”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas” 禁止显示此消息。

如果我从标签中删除 ngModel，我会收到以下错误：

'p-toggleButton' 不是已知元素：

如果“p-toggleButton”是一个 Angular 组件，则验证它是该模块的一部分。

如果“p-toggleButton”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas” 禁止显示此消息。

在 Angular 2-Webpack 应用程序中集成 PrimeNG 的正确方法是什么？我在这里缺少什么？

【问题讨论】：

标签： angular webpack togglebutton primeng

【解决方案1】：

我还没有使用 PrimeNG，但正在研究它。

但是，我认为您的问题更容易解决。 ngModel 来自 Angular FormsModule。他们的文档可以使这种依赖关系更加清晰。

将此添加到您的NgModule。

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ...
    FormsModule
  ],
  ...
});

【讨论】：

【解决方案2】：

请在./src/app/pages/dashboard/dashboard.component.ts:导入

import {ToggleButtonModule} from 'primeng/togglebutton';


export class DashboardComponent {
    checked: boolean;
}

在./src/app/app.module.ts

import { FormsModule } from '@angular/forms';     
    @NgModule({
      imports: [        
        FormsModule
      ]      
    })

【讨论】：