“ p菜单”不是已知元素

Question

我的应用程序结构如下：

仪表板模块

-> superadmin-dashboard组件

布局模块

->顶部标题组件

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

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

布局模块

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