Angular Primeng菜单栏访问方法问题
Angular Primeng是一种基于Angular框架的开源UI组件库，提供了丰富的可重用组件来构建Web应用程序。Primeng菜单栏是Primeng库中的一个重要组件，用于展示网站或应用程序的导航菜单。
访问Primeng菜单栏的方法如下：
- 首先，确保已经安装了Angular和Primeng库，并将它们引入到项目中。
- 在Angular组件的HTML模板中，使用Primeng的
p-menubar组件来创建菜单栏。可以使用<ul>和<li>元素来定义菜单项。 - 在组件的TypeScript文件中，可以使用菜单栏组件的事件绑定和属性来实现不同的功能。例如，可以使用
[model]属性来定义菜单项和子菜单，使用(onItemClick)事件来处理菜单项点击事件等。
Primeng菜单栏的主要优势包括：
- 可定制性：Primeng菜单栏提供了丰富的样式和主题选择，可以根据项目需求进行定制。
- 响应式设计：菜单栏组件在不同设备上具有良好的响应性，适应各种屏幕大小。
- 多级菜单支持：Primeng菜单栏支持多级菜单的嵌套，可以创建复杂的导航结构。
- 动态数据支持：可以根据需要动态加载菜单数据，实现灵活的菜单栏配置。
Primeng菜单栏适用于各种Web应用程序，特别是那些需要展示复杂导航结构和多级菜单的项目。例如，企业管理系统、电子商务网站、门户网站等。
在腾讯云中，可以使用Serverless Framework搭配云函数（云开发）来快速构建和部署基于Angular Primeng的Web应用程序。Serverless Framework提供了一套强大的工具和服务，简化了应用程序的部署和管理过程。您可以通过腾讯云云函数来部署和运行Angular应用程序，并使用腾讯云提供的丰富云服务来支持应用程序的后端功能。
更多关于Primeng菜单栏的信息和腾讯云相关产品介绍，请访问以下链接：
- Primeng官方文档：https://primefaces.org/primeng/
- 腾讯云Serverless Framework文档：https://cloud.tencent.com/document/product/1154
- 腾讯云云函数产品介绍：https://cloud.tencent.com/product/scf
- 腾讯云云开发产品介绍：https://cloud.tencent.com/product/tcb
相关·内容
默认的PrimeNG菜单栏在每个主菜单标题旁边都有一个向下箭头。我想从顶层菜单标题中完全删除向下箭头。嵌套的子菜单可以显示向右箭头，以表示有一个子菜单，这些子菜单可以保留。以下是一些默认菜单栏的截图： ? https://www.primefaces.org/primeng/showcase/#/menubar 我可以很容易地更改菜单项中的图标，但找不到一个手柄来更改/隐藏箭头。 我使用的是Angular CLI9.1.8和PrimeNG 9.1.0。
浏览 62提问于2020-06-21得票数 0
回答已采纳
我正在使用Angular4并通过以下方式安装primeng：
npm install primeng
现在我可以使用primeng，但不能调试它，因为node_modules\primeng只包含js (在ts编译之后)文件。
我能做些什么来调试我的项目中的原始类型记录？
浏览 2提问于2017-05-31得票数 0
回答已采纳
1回答
我想翻译 primeNG 菜单栏组件。但我不知道如何处理.ts文件中的翻译。我想从.json文件中获得转换数据。
import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { SocialAuthService, SocialUser } from 'angularx-social-login';
import { MenuItem, MessageService } from
浏览 1提问于2021-10-19得票数 0
我是新的Angular 2和primeNG，我正在做的项目是配置了webpack服务器的，现在我想为我的项目使用primeng，我该怎么做呢？
我使用npm安装primeng，并在appmodule中导入primeng模块，然后尝试使用
<p-dropdown [options]="cities" [(ngModel)]="selectedCity"></p-dropdown>
它显示的错误如下
./~/primeng/components/accordion/accordion.js
Module not found: Error: C
浏览 0提问于2017-04-06得票数 1
我正在尝试构建一个带有自定义Webpack配置的角库，其中我指定了externals设置，以从编译输出中排除某些依赖项。一切正常，所有的外部都被排除在外.除了PrimeNG！
注意:我使用的是角8和自定义构建器ngx-build-plus:browser，而不是ng-packagr，但我想在这种情况下它是不相关的。我对它进行了配置，以便它正确地构建库。而且确实如此，除了上述的问题。
我使用以下命令运行构建：ng build --extra-webpack-config libs/web-templates/extra-webpack.config.js --project web-templa
浏览 5提问于2020-02-08得票数 0
我正试图将PrimeNG加载到Webpack捆绑的Angular2应用程序中。
首先，我安装了npm：
npm install primeng --save
npm install primeui --save
这在我的package.json中增加了以下两行：
+ "primeng": "^1.0.0-beta.8",
+ "primeui": "^4.1.12",
接下来，如angular2-webpack入门版中的所示，我向venders.ts添加了一个导入。
import 'script!primeui
浏览 7提问于2016-06-13得票数 3
回答已采纳
我有一个下拉列表，其中包含在特定条件下从angular函数动态加载的100+元素。 此加载需要几秒钟。没有挂起的http调用，该时间由priming组件(dropdown)用于delete和create元素(选项)。 我会尝试使用primeng v7中的新功能virtualScroll。 我的项目有angular 4.x和primeng v6。我还没有找到primeng 7的基本要求。我试图升级到项目7，但项目仍然失败。 是否有从primeng 6迁移到primeng 7的文档？或者有没有可能在primeng 6中使用virtualscroll？
浏览 22提问于2019-07-03得票数 0
我在浏览器中遇到错误
GET http://localhost:3000/multiselect.css 404 (Not Found)
Failed to load multiselect.css
当我试图在组件模块文件中导入MultiSelectModule时：
import { MultiSelectModule } from 'primeng/multiselect';
@NgModule({
...
imports: [CommonModule, FormsModule, MultiSelectModule],
...
我已经在app.modules.ts中导
浏览 6提问于2021-11-10得票数 0
P-下拉菜单上的resetFilterOnHide="true“不起作用。如果我在筛选栏中键入内容，在下拉列表之外单击将其关闭，然后再次输入下拉列表，我输入的筛选器仍然存在。 我在angular 4应用程序中使用primeng 5.2.7。不幸的是，我不能将这些升级到最新版本，因为我在primeng的p-dropdown组件上遇到了一些问题。根据https://github.com/primefaces/primeng/issues/5915的说法，该问题已在primeng 6.0.1中记录和修复。 在primeng 5.2.7中有解决这个问题的方法吗？
浏览 24提问于2019-04-11得票数 0
1回答
我正在使用primeng日程表，日历看起来很好，但事件没有显示，如下图所示。这个项目相当简单。只需使用primeng和schedule。没什么复杂的。我已经附上了我的代码。如果任何人以前遇到过这个问题，并有解决方案。您的帮助将不胜感激。非常感谢
angular.json
"styles": [
"src/styles.css"
],
"scripts": [
"node_modules/moment/min/moment.min.js",
"node_modules/fullcalenda
浏览 39提问于2018-08-30得票数 0
我的应用程序使用PrimeNG & Angular2。
我有一个组件，它应该显示可选择主题的下拉菜单。我已经跟踪了文档，据我所见，我已经以同样的方式构建了所有的东西。但我总是收到错误“没有值访问器表示‘”
theme.component.ts：
import { Component, OnInit, Input } from '@angular/core'
import { Dropdown, SelectItem} from 'primeng/primeng';
@Component({
selector: 'my-themes'
浏览 1提问于2016-07-21得票数 8
回答已采纳
我有问题导入primeNG表到我的角度项目。所以我已经将表格模块导入到app.module.ts中，我得到了错误。
找不到角度模块时出错:错误:无法解析'D:\test angular\primengs\node_modules\primeng\components\dropdown‘I“wdm”中的’@angular/cdk/ ./node_modules/primeng/components/dropdown/dropdown.js‘：编译失败。
ERROR in node_modules/primeng/components/table/table.d.ts(5,27): err
浏览 3提问于2019-06-01得票数 5
回答已采纳
我们已经更新了我们在8到9的角度应用程序，也更新了primeng库到9.0.0-rc.4，但是我们得到了与primeng相关的错误消息。
import { MessageService } from 'primeng/components/common/api';
src/app/component/attachm.component.ts:5:55 - error TS2307: Cannot find module 'primeng/components/common/api'.
import { DynamicDialogRef, DynamicD
浏览 7提问于2020-02-13得票数 4
2回答
我为primeng 创建了单独的自定义模块。
自定义模块只包含与primeng相关的模块。
它不使用自定义模块。
我得到了一个错误，如下所示。
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppCom
浏览 0提问于2019-05-25得票数 2
回答已采纳
我正在尝试将一个自定义共享组件库导入到一个从角4升级到角5的角应用程序中。
然而，我有一个我无法解决的问题。
错误如下：
compiler.js:485 Uncaught Error: Can't resolve all parameters for LibSharedComponentsModule: ([object Object], ?, ?).
at syntaxError (compiler.js:485)
at CompileMetadataResolver._getDependenciesMetadata (compiler.js:15692)
a
浏览 0提问于2018-03-31得票数 0
回答已采纳
我在一个角10应用程序中使用PrimeNG 10.0.3。在它中，我导入了几个PrimeNG组件并使用它们，没有问题。然而，当我尝试使用TabView模块时，我得到了error NG8001：‘p’不是一个已知的元素，以及error NG8001：‘p’不是一个已知的元素。
我创建了一个名为primng.module的模块，其中托管了所有PrimeNG导入：
import { NgModule } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { Blo
浏览 2提问于2020-11-08得票数 0
回答已采纳
2回答
我安装了PrimeNG来获取表，在我遵循文档的角度没有读取并给我这个错误之后“- p- table‘不是一个已知的元素：
如果“p-table”是一个角度分量，则验证它是该模块的一部分。如果“p-table”是一个Web组件，则将“”添加“CUSTOM_ELEMENTS_SCHEMA”到该组件的“@NgModule.schemas”中，以抑制该message.ng“-这是我的app.module。
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Ng
浏览 4提问于2020-12-17得票数 1
回答已采纳
我的app.component.ts代码
import { Http, Response } from '@angular/http';
//import the do function to be used with the http library.
import "rxjs/add/operator/do";
import {FileUploadModule} from 'primeng/primeng';
//import the map function to be used with the http library
import &
浏览 0提问于2017-07-04得票数 1
1回答
我在Linux服务器上安装了Jenkins (我没有docker容器，只是一个普通的服务器)。我安装了所有建议的插件，以便自动化Java和Angular应用程序的内容。 现在我在运行cypress tests时遇到了问题。我可以构建Angular应用程序，但在无头模式下运行cypress测试时遇到问题。 我创建了一个"Freestyle项目“(不是管道)，只是为了运行测试。 ? 这是我的Angular项目中的相关脚本部分： "scripts": {
"build": "ng build",
"sta
浏览 22提问于2020-04-09得票数 6
1回答
我已经尝试过这个线程中的所有解决方案，但仍然无法解决这个问题。
我正在尝试使用PrimeNG菜单。
在app.module.ts中导入MenubarModule：import { MenubarModule } from 'primeng/menubar';
在app.component.ts中，按照PrimeNG指令导入MenuItem等等。
然而，在编译过程中，我得到了app.component.ts的一个错误：
“模块未找到:错误:无法解决'primeng/menubar/menubar'”
Package.json：
{
"name
浏览 3提问于2020-09-14得票数 2
3回答
当我尝试做npm install时，我得到以下信息：
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: foliosure@1.0.1
npm ERR! Found: zone.js@0.8.29
npm ERR! node_modules/zone.js
npm ERR! zone.js@"~0.8.26" from the root project
npm ERR! peer zone.js@
浏览 8提问于2021-02-22得票数 16
回答已采纳
我需要把我的包装从7升级到8。
我得到了以下错误：
anager-console/src/main/frontend/node_modules/primeng/primeng"‘没有导出成员'DataTable'
在组件文件中找不到以下导入
import { DataTable } from 'primeng/primeng';
package.json
"private": true,
"dependencies": {
"@angular/animations": "7.2.15&#
浏览 2提问于2019-07-16得票数 4
回答已采纳
我不能导入原始组件使用gulpfile.js，但在哪里我可以导入其他第三方组件。
我得到了未知源错误。请帮帮忙。
我必须更改primeng.js中的路径吗？
Layout.cshtml：
<script src="js/primeui-ng-all.js"></script>
<script>
System.config({
packages: {
'app': {
format: 'register',
浏览 0提问于2016-04-19得票数 1
让PrimeNG DataTable在我的web应用程序上正确渲染是有问题的。目前，显示器看起来是这样..。
在我的package.json依赖项一节中，如下所示
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0
浏览 3提问于2016-09-17得票数 1
回答已采纳
2回答
嗨，我正在尝试对datatable使用primeNG，但是输出只是一个基本表，没有应用它的属性。构成部分：
import { Component } from '@angular/core';
import {AccordionModule} from 'primeng/primeng'; //accordion and accordion tab
import {MenuItem} from 'primeng/primeng';
import {DataTableModule} from 'primeng/component
浏览 2提问于2017-10-13得票数 0
回答已采纳
我的Angular2应用程序在导入"primeng : 1.0.0-beta.15“和"primeui : 4.1.15”后出现以下错误
zone.js:461 Unhandled Promise rejection: TypeError: core_1.NgModule is not a function
at eval (http://localhost:4200/vendor/primeng/components/common/shared.js:291:16)
at Object.eval (http://localhost:4200/vendor/pr
浏览 13提问于2016-09-11得票数 0
回答已采纳
当我从primeng加载TableModule到我的组件模块文件并尝试运行'npm run packagr‘时，我遇到了以下错误： Maximum call stack size exceeded 我找到了这个解决方案，将我的primeng版本primeng12更改为primeng11.4.5。所以我这样做了，但现在我得到了以下错误： Angular structure loaded both synchronously and asynchronously 这是我的组件模块文件： import { NgModule } from '@angular/core';
i
浏览 54提问于2021-10-31得票数 0
回答已采纳
我对primeng和angular感到头疼，这一切都发生在我试图将primeng添加到Angular的库中的时候。
我所做的步骤是下一步。
ng g library generales
然后，我尝试将primeng安装到使用
npm install primeng --save
npm install primeicons --save
因此，这些依赖项作为库的依赖项添加到package.json中，所以这很酷，没有问题。例如，我想使用原始表，所以我将TableModule添加到GeneralesModule的imports数组中。如果我试图编译它，它需要angular/cdk和materia
浏览 22提问于2019-07-27得票数 5
我试图同时使用primeNG日历模块和reactiveFormsModule，但是当我同时使用它们时，日历消失了。
import {Common Module} from '@angular/common';
import {CalendarModule} from 'primeng/primeng';
import {ReactiveFormsModule} from '@angular/forms';
@NgModule({
imports: [CommonModule, ReactiveFormsModule, CalendarModul
浏览 1提问于2017-08-24得票数 0
为了使用PrimeNG的dropdown组件，我安装了Angular CDK，但它抛出了一个错误。 我在我的app.module.ts中添加了以下内容： import {DropdownModule} from 'primeng/dropdown'; 并通过简单地键入以下内容来安装Angular CDK： npm install @angular/cdk --save
浏览 57提问于2020-06-26得票数 6
回答已采纳
我刚刚开始了一个新的安圭拉项目。我一直在尝试使用角中的共享模块导入，然后将primeng模块导出到app.module.ts和使用者站点。Primeng是在app.module.ts中声明的组件中工作的，而不是我创建的consumer site.module.ts组件。我不知道为什么它在一种而另一种不起作用。
shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModul
浏览 7提问于2022-07-02得票数 -1
回答已采纳
我正在尝试构建用于生产的Angular 8应用程序，我得到了这些错误。有什么建议可以解决这个问题吗？ ERROR in ./node_modules/primeng/fesm5/primeng-table.js
Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
TypeError: Cannot read property 'kind' of undefined
at isAngularDeco
浏览 20提问于2019-12-14得票数 0
2回答
添加上下文路径角2
、、、
我想运行我的应用程序，而不是在。
我试图在index.html上更改基本的href，但是我得到了未实现的SyntaxError:意外令牌<
这是我的index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PrimengQuickstartCli</title>
<base href="pilot/"/>
<meta name="viewport" c
浏览 2提问于2017-01-24得票数 1
回答已采纳
这是我第一次尝试用Angular6，Primeng 6制作一个stackblitz应用程序。我试着用它创建Primeng图表。我安装了Chartjs并更新了angular.json文件，就像Primeng文档中给出的那样，但是它正在抛出错误，说明没有定义图表。有人能帮我解决这个问题吗。同样的事情在我当地的设置中也很有效。
下面是链接：
浏览 0提问于2018-10-12得票数 0
回答已采纳
1回答
我正在尝试将primeng库包含到我的项目中
package.json
"dependencies": {
"@angular/common": "~2.2.3",
"@angular/compiler": "~2.2.3",
"@angular/core": "~2.2.3",
"@angular/forms": "~2.2.3",
"@angular/http": "~2.2.3
浏览 3提问于2017-04-13得票数 3
我对angular2比较陌生，所以我想知道如何才能将我的版本(1.1.4)更新到最新版本！
我正在开发angular2的2.0.0-rc.5版本。
已经尝试过了
npm install primeng --save
但package.json仍然保留此值：""primeng"："^1.1.4"，“
angular根目录的package.json，以及node_modules目录中primeng的primeng
浏览 3提问于2017-04-06得票数 5
回答已采纳
我有我的应用程序在StackBlitz开发，并包括与ngx翻译包。在部署到firebase之前，它一直工作得很好。基本上所有的东西都碎了(哭泣……)我尽了最大努力详细说明我的配置和错误日志，因为我自己不能解决它。我也在互联网上翻找，但没有解决任何一个问题。很抱歉发了这么长的帖子。
index.html
<link rel="stylesheet" type="text/css" href="/node_modules/primeicons/primeicons.css" />
<link rel="stylesheet&
浏览 29提问于2020-06-01得票数 0
1回答
我试图在我的jhipster(spring/ PrimeNG )项目中使用PrimeNG图表，而所有类型的图表(或其他PrimeNG组件)都没有显示。我用的是角7.3.7和角7.1.3。我确实看到了一些报告的问题，并尝试了不同的解决方案，但没有结果。
Html页面
<p-chart type="bar" width="400" height="400" [data]="data" [options]="options"></p-chart>
组件代码
import {Component, O
浏览 0提问于2019-05-22得票数 0
你好，我在我的Angular项目中使用了PrimeNg组件。根据PrimeNg文档和Angular文档，我尝试了':host ::ng-deep'，':host-context()。但是什么都不起作用。
自定义css的PrimeNg文档：
Angular文档：
请建议我为PrimeNg组件添加自定义样式的最好方法。
浏览 0提问于2021-03-25得票数 0
我的app.module.ts和app.迎宾面板-菜单-列表. this之间有这个错误。有人能告诉我问题出在哪里吗？
app.module.ts：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { AppComponent } from './app.co
浏览 5提问于2017-09-27得票数 0
回答已采纳
2回答
为了学习，我修改了cli生成的初学者代码，如下所示。
app.component.ts
import { Component } from '@angular/core';
import {StepsModule,MenuItem} from 'primeng/primeng';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
ex
浏览 2提问于2017-05-06得票数 0
我发现了一些问题，试图将使用CSS的角度项目转换为项目usinc SCSS SASS。
我正在学习本教程：
所以我执行了这个命令：
ng config schematics.@schematics/angular:component.styleext scss
现在，在我的angular.json文件中，我得到了正确的值：
“图解”：{“@示意图/角度:组件”：{“样式图集”："scss“}
然后，我尝试使用重命名器工具作为解释，但没有工作。我表演了：
sudo renamer -d --path-element ext --find css -replace scss *
获取此错误
浏览 4提问于2020-08-13得票数 0
我试图使用一个服务在同一页面中的同级组件之间进行通信，但是侦听组件不会触发对订阅对象的更改：
服务
import {Injectable} from 'angular2/core';
import {Observable} from 'rxjs/Observable';
import {ReportTable} from '../classes/report.table.class';
import {Subject} from 'rxjs/Subject';
@Injectable()
export cl
浏览 3提问于2016-04-25得票数 1
回答已采纳
2回答
自从我的应用程序升级到Angular 7后，我的Primeng日期选择器就不能工作了。当我点击适当的字段时，日期选择器不显示，并且我无法通过键盘输入日期。
my.component.html
<label>Start Date:</label>
<p-calendar
[(ngModel)]="filterStartDate"
inputStyleClass="pCalendarInput"
[yearNavigator]="true"
yearRange="2000:2
浏览 31提问于2019-07-09得票数 0
我使用的是角11的PrimeNG 11，如下所示：
"dependencies": {
"@angular/animations": "^11.2.2",
"@angular/cdk": "^11.2.1",
"@angular/common": "^11.2.2",
"@angular/compiler": "^11.2.2",
"@angular/core": "^11.2.2",
"@angular/f
浏览 1提问于2021-02-24得票数 2
回答已采纳
我在Angular 4上工作，我想使用PrimeNG滚动面板。我使用的是primeng 4.0。但是当导入primeng滚动面板时，我得到了“找不到模块”的错误。请帮我解决这个问题。
浏览 4提问于2018-02-05得票数 0
我最近升级到了Angular 7，PrimeNG树表不再渲染。我已经在大多数页面中使用了树表，页面现在显示为空，并且它也不会抛出任何错误。下面是我的package.json的外观： {
"name": "angular4-cliv122",
"version": "0.0.0",
"license": "MIT",
"private": true,
"dependencies": {
"@angular/animations
浏览 43提问于2019-01-23得票数 0
我在使用PrimeNG组件(beta5)和angular2 (rc.1)时遇到了问题。当尝试使用任何组件时，例如菜单，我总是会得到错误
没有在菜单上找到指令注释
我刚开始学习角和PrimeNG，所以我可能做错了什么。但在谷歌上搜索了很多之后，我找不到任何帮助。
菜单组件似乎没有注释的原因是什么？我做错了什么？
请注意，我试图使用普通的javascript，即不使用TypeScript。(事实上，我是通过Brython使用Python的，但这完全是另一回事。)
我的index.html是这样开始的：
<script src="node_modules/es6-shim/es
浏览 3提问于2016-05-10得票数 0
1回答
目前，我正在尝试将Angular 7项目中的PrimeNG从^5.2.7升级到^7.1.3。在更新之后，当我运行"ng serve“时，我得到了与dropdown和multiselect相关的错误。要解决这个问题，建议安装@angular/cdk。但是完成这一步后，我的样式就崩溃了，因为@angular/cdk将所有类从"fa“(字体棒)更改为"pi”(primeicons)。还添加了一些新的样式，例如在"ui-dropdown“类上。这在一个大项目中产生了很多问题。有什么方法可以防止在更新PrimeNG时更改样式和类吗？ 提前谢谢。
浏览 35提问于2020-04-10得票数 0
1回答
我正在尝试在我的Angular 4代码中使用PrimeNg组件。模块被正确导入，但是样式没有被应用。
浏览器控制台正在显示404 error。
我使用了angular-cli来获取项目样板。
我在index.html中使用链接标签包含了样式，如下所示：
<link rel="stylesheet" href="/node_modules/font-awesome/css/font-awesome.min.css" />
<link href="/node_modules/primeng/resources/themes/omega/th
浏览 2提问于2017-09-23得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
