根据当前的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 中的方法。