Ng-zorro-antd: nz-menu-item支持根据路由自动高亮

[jackywang615]

I'm submitting a...

[ ] Bug report  
[ x] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here

Current behavior

在zn-menu-item中添加了路由后没法根据当前的默认路径自动高亮

Expected behavior

在默认跳转到指定路径时routerLinkActive匹配的路由能够自动高亮

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Angular version: X.Y.Z

ng-zorro-antd version: X.Y.Z

Browser:
- [ ] Chrome (desktop) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] IE version XX

For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[shaodahong]

大兄弟，routerLinkActive="ant-menu-item-selected"就OK了呀

[jackywang615]

@shaodahong
<li nz-menu-item routerLinkActive="ant-menu-item-selected"><a [routerLink]="['dashboard']">仪表盘</a></li>
没起作用啊，要放到a标签上才有效，但样式又不对了

[shaodahong]

a标签的写法有问题，换个写法试试 <li nz-menu-item routerLinkActive="ant-menu-item-selected"><a [routerLink]="/dashboard">仪表盘</a></li>

[jackywang615]

@shaodahong
一样的，没起作用

[vthinkxie]

@wanghaolu please check your code and https://angular.cn/guide/router for more detail. The method that @shaodahong provided is right.

[jackywang615]

@shaodahong @vthinkxie
我重现了这个问题，这个模块是通过lazy load加载的，在加载后就没法通过routerLinkActive="ant-menu-item-selected"来设置路由激活后的css，我发现仅限于这个名字的css class，随便改个名字都能应用成功。

我尝试将nz-menu-item指令从li标签中移除后这个css class应用成功。我怀疑是nz-menu-item导致ant-menu-item-selected这个css应用失败。

[vthinkxie]

@wanghaolu please check the doc site's(https://ng.ant.design) source code:
https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/src/showcase/app.component.html#L29
https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/src/showcase/app.routing.module.ts

The doc site also uses lazy load mode, and routerLinkActive="ant-menu-item-selected" works fine.

[jackywang615]

@vthinkxie
但是你这个app.component并不是通过延迟加载的，我的意思是延迟加载的子模块中的menu上使用routerLinkActive设置为ant-menu-item-selected会无效。

[jackywang615]

@vthinkxie 我已经新建了一个项目并复现了该问题，确认了在通过lazy load加载的模块中的menu上使用routerLinkActive="ant-menu-item-selected"无效。

[vthinkxie]

@wanghaolu bug confirm, thanks
We will try to fix it next version.

[zhhb]

another way to bind nzSelected or nzOpen is use the readonly prop isActive

angular doc below

<a routerLink="/user/bob" routerLinkActive #rla="routerLinkActive">
  Bob {{ rla.isActive ? '(already open)' : ''}}
</a>

and you can do like below (which could make menu parent auto selected)

<li nz-menu-item   routerLinkActive #rla="routerLinkActive" [nzSelected]="rla.isActive">
 // your links here 
</li>
<li  nz-submenu routerLinkActive #rla="routerLinkActive" [nzOpen]="rla.isActive">
 // your submenus here
</li>

[meherett]

ant-menu-item-selected

[mbenedettini]

I'm going with @zhhb approach since it's more solid than relying on a class name

[therepo90]

@zhhb great solution, works with forloop also thanks