p-menuitem 不是已知元素 - primeng

Posted 2023-02-16

【中文标题】p-menuitem 不是已知元素 - primeng

【英文标题】：p-menuitem not a known element - primeng

【发布时间】：2021-06-09 12:53:11

【问题描述】：

我是primeng的新手，遇到了这个困难。当我将p-menuitem 放入p-menubar 中时，角度会给我以下错误：

'p-menuitem' is not a known element:
1. If 'p-menuitem' is an Angular component, then verify that it is part of this module.
2. If 'p-menuitem' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

现在我知道我需要在 app.module.ts 中添加模块：

app.module.ts 代码：

import  NgModule  from '@angular/core';
import  FormsModule  from '@angular/forms';
import MenubarModule from 'primeng/menubar';

@NgModule(
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    MenubarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
)
export class AppModule  

HTML 代码：

<p-menubar [model]="items">
   <p-menuitem>Any code here</p-menuitem>
</p-menubar>

我还将MenubarModule 导入到与html 相同的component.ts 中，导入行虽然在那里褪色。我这里有什么遗漏吗？

版本：

"@angular/common": "~12.0.3"
"@angular/compiler": "~12.0.3"
"@angular/core": "~12.0.3"

"primeng": "12.0.0"
"primeicons": "4.1.0"

【问题讨论】：

根据他们的docs，似乎没有p-menuitem 指令。你试过这个<p-menubar [model]="items"></p-menubar>吗？你能告诉我们items属性的内容吗？

@DavidFontes <p-menubar [model]="items"></p-menubar> 按照您提供的链接中显示的方式工作。这是相同的代码

是的，我从他们的文档中复制，但我很困惑，这不符合您的需求吗？如果没有，您到底想达到什么目的？自定义样式？自定义内容？

我不确定p-menuitem 是像p-menubar 这样的指令还是像<label class="p-menuitem"></label> 那样的预定义类

根据他们的文档，它是一个用于样式目的的 css 类。

【参考方案1】：

在您的 Visual Studio 代码中使用 Angular Language Service 扩展时，请确保将“查看引擎”选项与您的 Angular 版本相匹配。

这可以在“扩展”视图中完成，然后点击Angular Language Server 项目，然后在齿轮图标（“管理”按钮）上选择“扩展设置”。

例如，在使用 Angular v12 时，不要选中“使用旧版视图引擎语言服务”选项，因为较新版本的 Angular 将 Ivy 作为其主要视图引擎。对于旧版本，您应该选中此选项以使语言服务器扩展正常工作。

请注意，可能同时存在多个重叠配置，例如“用户”+“工作区”。尤其是在处理远程开发容器时，扩展似乎很难读取设置——例如，在我的情况下，“远程 [开发容器]”选项卡中的特定设置似乎已被完全忽略，所以我不得不覆盖我的“用户”设置带有不需要的设置，以使警告消失。

【参考方案2】：

我终于在这里找到了解决方案 -> https://github.com/primefaces/primeng/blob/master/src/app/showcase/components/menubar/menubardemo.module.ts

您必须在 component.module.ts 中导入 MenubarModule 并在 @NgModule -> 导入中声明它

import  MenubarModule  from 'primeng/menubar';
@NgModule(
  imports: [
    CommonModule,
    AppRoutingModule,
    MenubarModule
  ],