不能在 Angular CLI 中使用 PrimeNG答案

【问题标题】：Can not use PrimeNG in Angular CLI不能在 Angular CLI 中使用 PrimeNG
【发布时间】：2017-01-17 03:01:07
【问题描述】：

我尝试在 Angular CLI 中使用 PrimeNG，但它不起作用@@！

组件.ts

import { Component, OnInit } from '@angular/core';
import { ToolbarModule } from 'primeng/primeng';
@Component({
  selector: 'app-marketing-menu-bar',
  templateUrl: './marketing-menu-bar.component.html',
  styleUrls: ['./marketing-menu-bar.component.css']
})
export class MarketingMenuBarComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

这是 Component.html

<p-toolbar>  
<div class="ui-toolbar-group-right">
    <button pButton type="button" icon="fa-search"></button>
    <i class="fa fa-bars"></i>
    <button pButton type="button" icon="fa-refresh"></button>
    <button pButton type="button" icon="fa-trash"></button>
</div>

在我运行 ng serve 之后：

未处理的 Promise 拒绝：模板解析错误： 'p-toolbar' 不是已知元素： 1. 如果“p-toolbar”是一个 Angular 组件，那么验证它是这个模块的一部分。 2. 如果 'p-toolbar' 是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。 ("[错误 ->]
;任务：Promise.then；值：SyntaxError {_nativeError：错误：模板解析错误： 'p-toolbar' 不是已知元素： 1. 如果 'p-toolbar' 是 Angular co…} 错误：模板解析错误： 'p-toolbar' 不是已知元素： 1. 如果“p-toolbar”是一个 Angular 组件，那么验证它是这个模块的一部分。 2. 如果 'p-toolbar' 是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。 ("[错误 ->]

【问题讨论】：

标签： angularjs typescript primeng

【解决方案1】：

您是否在 app.module.ts 中导入了 ToolbarModule ？

import { ToolbarModule } from 'primeng/toolbar';

【讨论】：

【解决方案2】：

错误消息告诉您需要做什么。在声明组件的模块中，将CUSTOM_ELEMENTS_SCHEMA 添加到您的导入中，例如：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

（您已经从@angular/core 导入NgModule，因此只需将新导入添加到这一行，用逗号分隔。）

然后在 @NgModule 装饰器中的某处添加以下行：

schemas: [ CUSTOM_ELEMENTS_SCHEMA ]

【讨论】：