一招搞定angular项目中菜单栏匹配路由高亮

一招搞定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库中的一个属性，意为是否选中。