angular - Angular8-10,PrimeNG10 `p-menu` 抛出错误
问题描述
我创建了一个新的 Angular 10 应用程序(也尝试过使用 ng 8 和 9):
primeng-menu>ng new primeng-menu
安装 PrimeNG 模块:
npm install primeng --save
和npm install primeicons --save
包.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"
},
角.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 吗?
解决方案
PrimeNGGetting Started
和/或Menu
文档未提及以下内容:
在app.module.ts
您需要导入:
import { MenuModule } from 'primeng/menu';
import { ButtonModule } from 'primeng/button';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
并将它们添加到导入中。
在 index.html 的标题中添加此链接<link rel="stylesheet" type="text/css" href="/node_modules/primeicons/primeicons.css" />
。
在angular.json
添加主题样式"node_modules/primeng/resources/themes/saga-blue/theme.css",
在使用来自“primeng/api”的app.component.ts
更新构造函数中。, private primengConfig: PrimeNGConfig
在顶部添加此语句ngOnInit
this.primengConfig.ripple = true;
推荐阅读
- python - 具有列条件的熊猫多索引选择
- julia - 引用 Julia 中的所有参数
- docker - 阻止网络流量并关闭 docker 容器中的网络
- java - 在重复数据库中注册
- java - Areospike - 如何使用 Java 在数据库中动态创建集合?
- php - PHP时间后从sql表中删除一行
- angular - 返回的 BehaviourSubjects(作为 Observable)是否受 take(1) 或取消订阅的影响?
- python - 如何从 MSFT_NetAdapter 中发现 PCI 信息
- c# - 如何在 C# 应用程序中从远程桌面访问 WCF 服务到另一台机器?
- snowflake-cloud-data-platform - 在 Snowflake 中手动重新聚类表的限制是什么?