angular - 如何使用 Angular UI 库 PrimeNG 在 tabMenu 标题中获得下拉菜单？

Question

我有一个 Angular 项目，我在其中使用primeng 组件。带有几个选项卡的 tabMenu 标题和显示一些选项的下拉菜单。

这是期望的结果：

tabMenu 标题

我创建了一个 tabMenu 标题，但无法添加下拉菜单，如上图所示。

我目前的进展如下：

没有下拉菜单的当前 tabMenu

当前代码如下：

.html 页面==>

<div class="layout-topbar" *ngIf="isAuth">
  <a class="logo" href="#/">
    <p>
      <span class="lg-text1">STUDENTS</span>
      <br>
      <span class="lg-text2">PEER</span>
      <span class="lg-text3"> REVIEW</span>
    </p>
  </a>
  <p-tabMenu [model]="items"></p-tabMenu>
</div>

.ts 页面==>

import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MenuItem } from 'primeng/api';
import { AuthenticationService } from '../auth/authentication.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  encapsulation: ViewEncapsulation.None
})

export class HeaderComponent implements OnInit {
  isAuth: boolean = false;
  items!: MenuItem[];
  liElements: any;

  constructor(private authService: AuthenticationService) {}

  ngOnInit() {
    this.isAuth = this.authService.checkIsLogged();
    this.items = [
      {label: 'Courses', icon: 'pi pi-fw pi-book'},
      {label: 'Assessments', icon: 'pi pi-fw pi-calendar'},
      {label: 'Libraries', icon: 'pi pi-fw pi-list'},
      {label: 'Reports', icon: 'pi pi-fw pi-file-o'},
      {label: 'Notifications', icon: 'pi pi-fw pi-cog'},
      {label: 'Help', icon: 'pi pi-fw pi-question'}
    ];
    
  }
}

.css 页面==>

.logo {
    position: absolute;
    top: 5px;
    left: 25px;
    z-index: 1;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
}
.logo {
    .lg-text1 {
        color: red;
    }
    .lg-text2 {
        color: #4152ec;
    }
    .lg-text3 {
        color: black; 
    }
}
.layout-topbar {
    position: relative;
}
.p-tabmenu {
    position: relative;
    
    .p-tabmenuitem {
        margin-top: 15px;
    }
    .p-tabmenuitem:first-child {
        margin-left: 135px;
    }
}

我可以通过什么方式将下拉菜单添加到 tabMenu，如第一张图片所示？谢谢你。

标签： angularprimengangular-uiprimeng-dropdowns