p-menuitem 不是已知元素 - primeng

Question

我是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"

Answer 1

在 Visual Studio Code 中使用

Angular Language Service

扩展时，请务必将“View Engine”选项与您的 Angular 版本相匹配。

这可以在“扩展”视图中完成，然后单击

Angular Language Server

项目，然后在齿轮图标（“管理”按钮）处选择“扩展设置”。

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

请注意，可能同时存在多个重叠配置，例如“用户”+“工作空间”。特别是在处理远程开发容器时，扩展似乎很难读取设置 - 例如，在我的情况下，“远程 [开发容器]”选项卡中的特定设置似乎已完全被忽略，因此我必须覆盖我的“用户”设置包含不需要的设置，以便警告消失。

Answer 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
  ],

Answer 3

如果有人在导入 PrimeNG 菜单栏时遇到困难，我想补充一点，以下行应放入 app.module.ts 文件中。:

import { MenubarModule } from 'primeng/menubar';

以下行应进入 app.component.ts 文件：

import {MenuItem} from 'primeng/api';

当您点击 PrimeNG 文档提供的 Stackblitz 链接时，就会清楚： https://stackblitz.com/edit/primeng-menubar-demo?file=README.md