使用自定义模块应用primeng

时间:2019-05-25 07:14:45

标签: angular primeng

  • 我已经为prime https://www.primefaces.org/primeng/#/card创建了单独的自定义模块。

  • 自定义模块仅包含与primeng相关的模块。

  • 使用自定义模块不起作用

  • 我收到如下所示的错误。

enter image description here

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FirstComponent } from './first/first.component';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { PrimecustomModule } from './primeng.custom.module';


@NgModule({
  declarations: [
    AppComponent,
    FirstComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    FormsModule,
    PrimecustomModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

**customModule**


 import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import {DataTableModule} from 'primeng/datatable';
import {TriStateCheckboxModule} from 'primeng/tristatecheckbox';
import {CheckboxModule} from 'primeng/checkbox';
import {ListboxModule} from 'primeng/listbox';
import {EditorModule} from 'primeng/editor';
import {CardModule} from 'primeng/card';
@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    DataTableModule,
    TriStateCheckboxModule,
    CheckboxModule,
    ListboxModule,
    ReactiveFormsModule,
    FormsModule,
    EditorModule,
    CardModule
  ],
  exports: []
})
export class PrimecustomModule { }

2 个答案:

答案 0 :(得分:1)

当前,您的primeng.custom.module.ts并未导出任何内容供您的app.module.ts导入。

要解决此问题,您还需要将每个PrimeNG模块添加到自定义模块中的exports数组中。这样便可以将它们导入到应用模块中。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { DataTableModule } from 'primeng/datatable';
import { TriStateCheckboxModule } from 'primeng/tristatecheckbox';
import { CheckboxModule } from 'primeng/checkbox';
import { ListboxModule } from 'primeng/listbox';
import { EditorModule } from 'primeng/editor';
import { CardModule } from 'primeng/card';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    DataTableModule,
    TriStateCheckboxModule,
    CheckboxModule,
    ListboxModule,
    ReactiveFormsModule,
    FormsModule,
    EditorModule,
    CardModule
  ],
  exports: [
    CommonModule,
    DataTableModule,
    TriStateCheckboxModule,
    CheckboxModule,
    ListboxModule,
    ReactiveFormsModule,
    FormsModule,
    EditorModule,
    CardModule
  ]
})
export class PrimecustomModule { }

答案 1 :(得分:1)

如果要将自定义模块用于主要ng组件,则应执行3个步骤:

1-创建一个自定义模块,并将prime ng模块导入该模块中。那么您应该将模块的名称放在@NgModule中的imports数组中。

2- @ NgModule中还有另一个名称是exports。这是另一个数组。您应该将模块的名称放在导出数组中。

3-您应该在应用程序的app.module中添加自定义模块。

这是给你的一个例子:

在primeng.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import {ConfirmDialogModule} from 'primeng/confirmdialog';
 import {ButtonModule} from 'primeng/button';
 import {DialogModule} from 'primeng/dialog';
 import {MessageModule} from 'primeng/message';
 import {SidebarModule} from 'primeng/sidebar';
 import {TableModule} from 'primeng/table';
 import {FileUploadModule} from 'primeng/fileupload';
 import {ToastModule} from 'primeng/toast';
 import { MessageService } from 'primeng/components/common/messageservice';

 @NgModule({
  declarations: [],
  imports: [
    CommonModule,
     ConfirmDialogModule,
    ButtonModule,
   DialogModule,
   MessageModule,
   SidebarModule,
   TableModule,
   FileUploadModule,
   ToastModule
    ],
   exports:[ToastModule,FileUploadModule
   ,ConfirmDialogModule,ButtonModule,DialogModule
   ,MessageModule,SidebarModule,TableModule],

   providers:[MessageService]
  })
  export class PrimengModule { }

然后您应该在app.module中注册该模块

  import { PrimengModule } from './primeng/primeng.module';

并将此模块添加到app.module的导入数组中

   imports: [
     PrimengModule 
   ]