一招搞定angular项目中菜单栏匹配路由高亮
技术栈:Angular + NG-ZORRO
当你的项目中选择一个左侧菜单,一刷新就将高亮选中效果刷没了,或者是通过点击某个按钮跳转到别的路由菜单中,结果发现菜单中高亮效果还是保持在之前的样式,要花费不少的时间来同步,这咋搞?
通过路由来匹配菜单一招搞定
// this.router.url 获取到当前路由
<ng-container *ngFor="let menu of menus">
<li nz-menu-item [nzSelected]="menu.link === this.router.url">
<span title>
<i nz-icon [nzType]="menu.icon" *ngIf="menu.icon"></i>
<span>{{ menu.text }}</span>
</span>
</li>
</ng-container>
// 菜单数据
let menus = [
{
"key": 001,
"title": "首页1",
"text": "首页1",
"id": 001,
"link": "/home1",
"icon": "home1"
},
{
"key": 002,
"title": "首页2",
"text": "首页2",
"id": 002,
"link": "/home2",
"icon": "home2"
},
]
[nzSelected ] 是UI库中的一个属性,意为是否选中。