Angular 8-10，PrimeNG 10 `p-menu` 抛出错误

Question

我创建了一个新的 Angular 10 应用程序（也尝试过 ng 8 和 9）：

primeng-menu>ng new primeng-menu

安装了 PrimeNG 模块：

npm install primeng --save 和 npm install primeicons --save

package.json:

"dependencies": {
  "@angular/animations": "~10.1.1",
  "@angular/common": "~10.1.1",
  "@angular/compiler": "~10.1.1",
  "@angular/core": "~10.1.1",
  "@angular/forms": "~10.1.1",
  "@angular/platform-browser": "~10.1.1",
  "@angular/platform-browser-dynamic": "~10.1.1",
  "@angular/router": "~10.1.1",
  "primeicons": "^4.0.0",
  "primeng": "^10.0.0",
  "rxjs": "~6.6.0",
  "tslib": "^2.0.0",
  "zone.js": "~0.10.2"
},

angular.json:

"styles": [
          "node_modules/primeng/resources/primeng.min.css",
          "node_modules/primeicons/primeicons.css",
          "src/styles.css"
        ],

app.component.ts:

import { Component, OnInit } from '@angular/core';
import { MenuModule } from 'primeng/menu';
import { MenuItem, MessageService } from 'primeng/api';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  items: MenuItem[];

  constructor(private messageService: MessageService) { }

  ngOnInit() {
    this.items = [{
      label: 'Options',
      items: [{
        label: 'Update',
        icon: 'pi pi-refresh',
        command: () => {
          this.update();
        }
      },
      {
        label: 'Delete',
        icon: 'pi pi-times',
        command: () => {
          this.delete();
        }
      }
      ]
    },
    {
      label: 'Navigate',
      items: [{
        label: 'Angular Website',
        icon: 'pi pi-external-link',
        url: 'http://angular.io'
      },
      {
        label: 'Router',
        icon: 'pi pi-upload',
        routerLink: '/fileupload'
      }
      ]
    }
    ];
  }

  update() {
    this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Data Updated' });
  }

  delete() {
    this.messageService.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
  }
}

app.component.html:

<h5>Basic</h5>
<p-menu [model]="items"></p-menu>

<h5>Overlay</h5>
<button type="button" pButton icon="pi pi-bars" label="Show" (click)="menu.toggle($event)"> </button>
<p-menu #menu [popup]="true" [model]="items"></p-menu>

当我运行 ng serve 时它不会编译。我得到 error NG8001: 'p-menu' is not a known element:

ERROR in src/app/app.component.html:3:1 - error NG8001: 'p-menu' is not a known element:
1. If 'p-menu' is an Angular component, then verify that it is part of this module.
2. If 'p-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3 <p-menu [model]="items"></p-menu>
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/app.component.ts:7:16
    7   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.
src/app/app.component.html:3:9 - error NG8002: Can't bind to 'model' since it isn't a known property of 'p-menu'.
1. If 'p-menu' is an Angular component and it has 'model' input, then verify that it is part of this module.
2. If 'p-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

3 <p-menu [model]="items"></p-menu>

我遵循了 PrimeNG 网站上的所有说明。我错过了什么吗？有没有其他人 PrimeNG10 Menu 与 Angular 一起工作？

Answer 1

您忘记的一件事是将 Menumodule 添加到您的 app.module.ts

import {MenuModule} from 'primeng/menu';
@NgModule({
  imports:      [ Menumodule]
})
export class AppModule { }

Answer 2

PrimeNG 的 Getting Started and/or Menu 文档没有提及以下内容：

在app.module.ts你需要导入：

import { MenuModule } from 'primeng/menu';

import { ButtonModule } from 'primeng/button';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

并将它们添加到导入中。

在 index.html 的 header 添加这个 link <link rel="stylesheet" type="text/css" href="/node_modules/primeicons/primeicons.css" />.

在angular.json添加主题样式"node_modules/primeng/resources/themes/saga-blue/theme.css",

在 app.component.ts 中用 'primeng/api' 中的 , private primengConfig: PrimeNGConfig 更新构造函数。

在 ngOnInit this.primengConfig.ripple = true;

的顶部添加此语句

Angular 8-10，PrimeNG 10 `p-menu` 抛出错误

Angular8-10, PrimeNG10 `p-menu` throws error

angular

primeng-menu