先放最终实现的效果图：

根据当前的routerlink自动对相应按钮添加 highlight特效

TL;DR

angular 的router有这个功能 ：https://angular.dev/api/router/RouterLinkActive

primeng menubar 组件通过 [routerLinkActive]="'p-menuitem-link-active'" 利用了这个功能，做到了在菜单项的路由与当前路由匹配时自动添加 p-menuitem-link-active 类。

作为使用者的我们，只需要写针对这个类的css就可以了：

src/app/styles.css

/* https://stackoverflow.com/a/55542222 */
/* https://primeng.org/colors#overview */
app-menubar .p-menuitem-link-active {
    background-color: var(--highlight-bg);
    color: var(--highlight-text-color);
    border-radius: var(--border-radius);
}
app-menubar .p-menuitem-link-active >span{
    background-color: var(--highlight-bg);
    color: var(--highlight-text-color);
    border-radius: var(--border-radius);
}

心路历程

原本，我看primeng 的 menubar 文档没有这个教程，以为 menubarSub 组件做不到这个要求，就打算不用menubarSub了，自己做一个menubarSub出来

<div class="card">

    <p-menubar  [ariaLabel]="'Home'">
        <ng-template pTemplate="start" let-item let-root="root">

            <ul class="p-menu-list p-menubar-root-list" role="menubar">
                <li #listItem role="menuitem" *ngFor="let item of items" class="p-element p-menuitem " [ngClass]="getItemClass(item)">
<!-- getItemClass(item)-->
                    <div class="p-menuitem-content ">
                        <a pRipple [routerLink]="item.routerLink" class="flex align-items-center p-menuitem-link ">
                            <span class="p-menuitem-icon" [class]="item.icon"></span>
                            <span class="p-menuitem-text">{{ item.label }}</span>
                            <p-badge *ngIf="item.badge" [ngClass]="{ 'ml-auto': !root, 'ml-2': root }"
                                [value]="item.badge" />
                            <i *ngIf="item.items"
                                [ngClass]="['pi', root ? 'pi-angle-down ml-2' : 'pi-angle-right ml-auto']"></i>
                        </a>
                    </div>
                </li>
            </ul>
        </ng-template>

        <!-- 要深度定制menubar左边显示的东西及动效，原有的 item 组件不好改，就不用原来的了-->
        <ng-template pTemplate="item" let-item let-root="root">
            
        </ng-template>
    </p-menubar>
</div>

export class MenubarComponent {
    ngOnInit() {
        this.items = [
            {
                label: 'Home',
                icon: 'pi pi-home',
                routerLink: ["my","serviceTickets"],
                routerLinkActiveOptions: { exact: true }
            },
            {
                label: 'Features',
                icon: 'pi pi-star',
                routerLink: "/my/serviceWindows",
                routerLinkActiveOptions: { exact: true }
            }
        ]
    }
    getItemClass(item :{label:string,icon:string,routerLink:string}){
        if(item.routerLink == this.router.url){
            return "p-highlight";
        }
        return "";
    }
}

然后发现这样搞，menubar在手机版显示的时候会出问题，而且也会破坏原来组件的可访问性啦、键盘操作啦等等，就继续研究，中间还通过gpt搞出了hook的方法，但是用不了，最后继续研究才发现了 TL;DR 中的方法。