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-button元素添加到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组件？

4 个答案: