angular - "p-menu"不是已知元素

Question

我的应用程序结构是这样的:

仪表板模块

-> superadmin-dashboard 组件

布局模块

-> 顶部标题组件

我正在尝试在 superadmin-dashboard 组件中使用 top-header从 PrimeNG 菜单导入顶部 header 组件

问题:当我尝试使用选择器调用 superadmin-dashboard 组件中的 top-header 组件时，我收到一条警告，提示 p-menu 不是已知元素，并且菜单不起作用。

布局模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TopHeaderComponent } from './top-header/top-header.component';
import { LoginComponent } from './login/login.component';
import { FormsModule } from '@angular/forms';
import { SecondHeaderComponent } from './second-header/second-header.component';



@NgModule({
  declarations: [
    TopHeaderComponent,
    LoginComponent,
    SecondHeaderComponent],
  imports: [
    CommonModule,
    FormsModule
  ],
  exports: [
    TopHeaderComponent,
    LoginComponent,
    SecondHeaderComponent,
    FormsModule,
    CommonModule
  ]
})
export class LayoutModule { }

仪表板模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SuperadminDashboardComponent } from './superadmin-dashboard/superadmin-dashboard.component';
import { CustomerDashboardComponent } from './customer-dashboard/customer-dashboard.component';
import { CardModule } from 'primeng/card';
import { LayoutModule } from '../layout/layout.module';




@NgModule({
  declarations: [SuperadminDashboardComponent, CustomerDashboardComponent],
  imports: [
    CommonModule,
    CardModule,
    LayoutModule

  ],
  exports: [
    SuperadminDashboardComponent,
    CustomerDashboardComponent,
  ]
})
export class DashboardsModule { }

Answer 1

您必须将 MenuModule 导入布局模块才能使用 p-menu。布局模块的任何已声明组件内部。

布局模块

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { TopHeaderComponent } from './top-header/top-header.component';
    import { LoginComponent } from './login/login.component';
    import { FormsModule } from '@angular/forms';
    import { SecondHeaderComponent } from './second-header/second-header.component';
    import { MenuModule } from 'primeng/menu'; // add this import


    @NgModule({
      declarations: [
        TopHeaderComponent,
        LoginComponent,
        SecondHeaderComponent],
      imports: [
        CommonModule,
        FormsModule,
        MenuModule // use it here
      ],
      exports: [
        TopHeaderComponent,
        LoginComponent,
        SecondHeaderComponent,
        FormsModule,
        CommonModule
      ]
    })
    export class LayoutModule { }