“p-menu”不是已知元素

Posted 2023-02-22

【中文标题】“p-menu”不是已知元素

【英文标题】："p-menu" is not a known element

【发布时间】：2020-09-14 20:35:15

【问题描述】：

我的应用结构是这样的：

仪表板模块

-> superadmin-dashboard 组件

布局模块

-> 顶部标题组件

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

问题：当我尝试使用选择器调用 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  

【参考方案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  

【讨论】：

感谢您的帮助。我完全忘记添加了。