如何在 Ionic 4 中使用 PrimeNG 组件？

Question

我想在 Ionic 4 应用程序中使用 PrimeNG 组件。我进行如下操作。我创建了一个空白的 Ionic 4 应用程序：

 ionic start myApp blank

接下来我要下载PrimeNG到项目中：

 npm install primeng@7.0.0 --save
 npm install primeicons@1.0.0 --save

接下来，我将第一个 PrimeNG UI 组件 (ButtonModule) 作为模块导入 app.module.ts:

 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouteReuseStrategy } from '@angular/router';

 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';

 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';

 import {ButtonModule} from 'primeng/button';

 @NgModule({
   declarations: [AppComponent],
   entryComponents: [],
   imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, ButtonModule],
   providers: [
     StatusBar,
     SplashScreen,
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
   ],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

接下来我将 p 按钮元素添加到 home.page.html:

 <ion-header>
   <ion-toolbar>
     <ion-title>
       Ionic Blank
     </ion-title>
   </ion-toolbar>
 </ion-header>

 <ion-content padding>
   <p-button label="Click"></p-button>
 </ion-content>

当我使用

启动应用程序时

 ng serve

我在控制台上收到以下错误：

 ERROR Error: "Uncaught (in promise): Error: Template parse errors:
 'p-button' is not a known element:
 1. If 'p-button' is an Angular component, then verify that it is part of this module.
 2. If 'p-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
   [ERROR ->]<p-button label="Click"></p-button>
 </ion-content>
 "): ng:///HomePageModule/HomePage.html@11:2
 syntaxError@http://localhost:4200/vendor.js:8787:17

感谢您的帮助。

Answer 1

您必须在导入时导入该模块下要使用的所有组件模块。

示例：

imports: [
        BrowserModule,
        FormsModule,
        AppRoutes,
        HttpModule,
        BrowserAnimationsModule,
        AccordionModule,
        AutoCompleteModule,
        BreadcrumbModule,
        ButtonModule,
        CalendarModule,
        CarouselModule,
        ChartModule,
        CheckboxModule,
        ChipsModule,
        CodeHighlighterModule,
        ConfirmDialogModule,
        ColorPickerModule,
        SharedModule,
        ContextMenuModule,
        DataGridModule,
        DataListModule,
        DataScrollerModule,
        DataTableModule,
        DialogModule,
        DragDropModule]

这应该有效

Answer 2

我相信你有一个home.module.ts，如果你有这个文件，你必须在里面声明PrimeNG模块，像这样：

home/home.module.ts

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { HomePage } from './home';

import {ButtonModule} from 'primeng/button';

@NgModule({
  imports: [
    IonicModule,
    ButtonModule
  ],
  declarations: [HomePage],
  entryComponents: [HomePage]
})
export class HomePageModule {}

I created a functional example here

Answer 3

请确保您的 home.page 组件是 AppModule 的一部分，或者将 ButtonModule 导入到 home.page component 的同一模块。

Answer 4

你必须在样式块的 angular.json 内添加 primeng css，如下所示：

"styles": [                           
  {
    "input": "src/theme/variables.scss"                
  },
  {
    "input": "src/global.scss"
  },
  "node_modules/primeicons/primeicons.css",
  "node_modules/primeng/resources/themes/nova-light/theme.css",
  "node_modules/primeng/resources/primeng.min.css"
],

然后在页面模块中导入您需要的每个模块，例如 home.module.ts:

import {ButtonModule} from 'primeng/button';
@NgModule({
  imports: [
    ButtonModule,
    //..
],
//..

如何在 Ionic 4 中使用 PrimeNG 组件？

How can I use PrimeNG components in Ionic 4?

primeng

angular

ionic4

angular7