时间戳

首页 > 解决方案 > PrimeNG 10.0.3 - 错误 NG8001：“p-tabView”不是已知元素

primeng - PrimeNG 10.0.3 - 错误 NG8001：“p-tabView”不是已知元素

问题描述

我在 Angular 10 应用程序中使用 PrimeNG 10.0.3。在其中，我正在导入几个 PrimeNG 组件并毫无问题地使用它们。但是，当我尝试使用 TabView 模块时，我收到错误 NG8001: 'p-tabView' is not a known element以及错误 NG8001: 'p-tabPanel' is not a known element。

我创建了一个名为 primng.module 的模块，我在其中托管所有 PrimeNG 导入：

import { NgModule } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { BlockUIModule } from 'primeng/blockui';
import { ToastModule } from 'primeng/toast';
import { DialogModule } from 'primeng/dialog';
import { ConfirmDialogModule } from 'primeng/confirmdialog';
import { OverlayPanelModule } from 'primeng/overlaypanel';
import { PanelModule } from 'primeng/panel';
import { CardModule } from 'primeng/card';
import { SidebarModule } from 'primeng/sidebar';
import { InputMaskModule } from 'primeng/inputmask';
import { PasswordModule } from 'primeng/password';
import { TableModule } from 'primeng/table';
import { TabViewModule } from 'primeng/tabview';

import { ConfirmationService, MessageService } from 'primeng/api';

@NgModule({
  imports: [

  ],
  exports: [
    ButtonModule,
    BlockUIModule,
    ToastModule,
    DialogModule,
    ConfirmDialogModule,
    OverlayPanelModule,
    PanelModule,
    CardModule,
    SidebarModule,
    InputMaskModule,
    PasswordModule,
    TableModule,
    TabViewModule
  ],
  providers: [
    MessageService,
    ConfirmationService
  ]
})
export class PrimengModule { }

然后我将此模块导入为：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PrimengModule } from '../../primeng.module';

...

const routes: Routes = [
  ...
];

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    RouterModule.forChild(routes),
    PrimengModule
  ],
  exports: [
    RouterModule
  ]
})
export class AdminRoutingModule { }

最后，我将 TabView 用作：

  <p-tabView>
    <p-tabPanel header="Header 1">
      Content 1
    </p-tabPanel>
    <p-tabPanel header="Header 2">
      Content 2
    </p-tabPanel>
    <p-tabPanel header="Header 3">
      Content 3
    </p-tabPanel>
  </p-tabView>

我使用任何其他模块都没有问题，只是 TabView。

我错过了什么？

谢谢。

标签： primeng

解决方案

好的，事实证明这与 PrimeNG 无关。我有 p-tabView 标记的托管组件被错误地声明在一个不同的模块中，该模块对我的primeng.module.ts一无所知，自然不知道如何处理TabView。

经验教训：注意您在哪个模块中声明每个组件。确保该模块知道您需要在组件中使用的功能。

推荐阅读