Angular PrimeNG TieredMenu组件是一个多级菜单组件，可以在每个级别显示不同的选项，以及在每个级别上触发不同的操作。

使用TieredMenu组件需要引入PrimeNG模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TieredMenuModule } from 'primeng/tieredmenu';

@NgModule({
  imports: [
    CommonModule,
    TieredMenuModule
  ],
  exports: [
    TieredMenuModule
  ]
})
export class SharedModule { }

然后在组件的HTML文件中添加TieredMenu组件：

这里的items是一个数组，包含了TieredMenu的所有级别和选项。每个选项包含一个label字符串属性表示名称，一个可选的url属性表示链接地址，以及一个可选的command方法属性表示点击后的操作。

this.items = [
  {
    label: 'File',
    items: [
      {label: 'New', icon: 'pi pi-fw pi-plus'},
      {label: 'Open', icon: 'pi pi-fw pi-download'},
      {label: 'Undo', icon: 'pi pi-fw pi-refresh'}
    ]
  },
  {
    label: 'Edit',
    items: [
      {label: 'Cut', icon: 'pi pi-fw pi-cut'},
      {label: 'Copy', icon: 'pi pi-fw pi-copy'},
      {label: 'Paste', icon: 'pi pi-fw pi-paste'}
    ]
  }
];

TieredMenu组件默认会水平显示，如果需要垂直显示，可以添加[orientation]="'vertical'"属性。

完整的TieredMenu示例代码如下：

this.items = [
  {
    label: 'File',
    icon: 'pi pi-fw pi-file',
    items: [
      {
        label: 'New',
        icon: 'pi pi-fw pi-plus',
        items: [
          {label: 'Project'},
          {label: 'Other'},
        ]
      },
      {label: 'Open', icon: 'pi pi-fw pi-download'},
      {separator: true},
      {label: 'Quit', icon: 'pi pi-fw pi-times'}
    ]
  },
  {
    label: 'Edit',
    icon: 'pi pi-fw pi-pencil',
    items: [
      {label: 'Copy', icon: 'pi pi-fw pi-copy'},
      {label: 'Paste', icon: 'pi pi-fw pi-upload'},
      {label: 'Delete', icon: 'pi pi-fw pi-trash'}
    ]
  },
  {
    label: 'Help',
    icon: 'pi pi-fw pi-question',
    items: [
      {
        label: 'Contents',
        icon: 'pi pi-pi pi-bars'
      },
      {
        label: 'Search',
        icon: 'pi pi-pi pi-search',
        items: [
          {
            label: 'Text',
            items: [
              {
                label: 'Workspace'
              }
            ]
          },
          {
            label: 'File'
          }
        ]}
    ]
  }
];

免责声明：本文内容通过AI工具匹配关键字智能整合而成，仅供参考，火山引擎不对内容的真实、准确或完整作任何形式的承诺。如有任何问题或意见，您可以通过联系service@volcengine.com进行反馈，火山引擎收到您的反馈后将及时答复和处理。