Angular PrimeNG的TieredMenu是一种弹出式菜单，它可以帮助您创建多级子菜单，并使您的应用程序具有更多的交互性和可用性。

要使用PrimeNG的TieredMenu，您需要先安装PrimeNG，然后添加tieredmenu模块。

以下是一个简单的示例，演示如何在Angular应用程序中使用PrimeNG TieredMenu：

1. 首先，安装PrimeNG：

npm install primeng --save 

2. 导入TieredMenu模块：

import {TieredMenuModule} from 'primeng/tieredmenu';

3. 在组件中创建菜单项列表：

items: MenuItem[];

ngOnInit() {
    this.items = [
        {
            label: 'File',
            items: [
                {
                    label: 'New',
                    icon: 'pi pi-fw pi-plus',
                    items: [
                        {
                            label: 'Project'
                        },
                        {
                            label: 'Other',
                            items: [
                                {
                                    label: 'Save',
                                    icon: 'pi pi-fw pi-calendar'
                                },
                                {
                                    label: 'Delete',
                                    icon: 'pi pi-fw pi-trash'
                                }
                            ]
                        }
                    ]
                },
                {
                    label: 'Open',
                    icon: 'pi pi-fw pi-external-link'
                }
            ]
        },
        {
            label: 'Edit',
            icon: 'pi pi-fw pi-pencil',
            items: [
                {
                    label: 'Delete',
                    icon: 'pi pi-fw pi-trash'
                },
                {
                    label: 'Refresh',
                    icon: 'pi pi-fw pi-refresh'
                }
            ]
        }
    ];
}

这将创建一个具有两个顶级菜单项（"File"和"Edit"）的菜单，每个菜单项下面有多个子菜单项。

4. 将菜单添加到HTML中：

这将在页面上创建一个菜单，并将之前创建的菜单项列表作为输入。

这是一个完整的示例：

import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/api';
import { TieredMenuModule } from 'primeng/tieredmenu';

@Component({
  selector: 'app-tieredmenu',
  template: `
    
  `,
})
export class TieredmenuComponent implements OnInit {
  items: MenuItem[];

  ngOnInit() {
    this.items = [
      {
        label: 'File',
        items: [
          {
            label: 'New',
            icon: 'pi pi-fw pi-plus',
            items: [
              {
                label: 'Project',
              },
              {
                label: 'Other',
                items: [
                  {
                    label: 'Save',
                    icon: 'pi pi-fw pi-calendar',
                  },
                  {
                    label: 'Delete',
                    icon: 'pi pi-fw pi-trash',
                  },
                ],
              },
            ],
          },
          {
            label: 'Open',
            icon: 'pi pi-fw pi-external-link',
          },
        ],
      },
      {
        label: 'Edit',
        icon: 'pi pi-fw pi-pencil',
        items: [
          {
            label: 'Delete',
            icon: 'pi pi-fw pi-trash',
          },
          {
            label: 'Refresh',
            icon: 'pi pi-fw pi-refresh',
          },
        ],
      },
    ];
  }
}

在这个示例中，我们创建了一个名为"TieredmenuComponent"的组件，它导入了PrimeNG的TieredMenu模块，并在组件中创建了一个菜单项列表。

在ngOnInit生命周期钩子中，我们初始化了items数组，并向其中添加菜单项。我们使用"items"标签属性将列表传递给TieredMenu组件，然后将组件添加到HTML模板中。

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