使用自定义模块应用 primeng

Question

我已经为 primeng https://www.primefaces.org/primeng/#/card 创建了单独的自定义模块。
自定义模块只包含与primeng相关的模块。
使用自定义模块无效
我收到如下所示的错误。

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 { }

Answer 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 { }

Answer 2

如果你想为 prime 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 
   ]

使用自定义模块应用 primeng

Apply primeng using custom module

primeng

angular