Question

我有一些菜单项可以单击并转到不同的路线。通过单击项目更改路线时，它保持突出显示状态。例如，单击“主页”，转到url.com/home，“主页”按钮保持突出显示。但是，如果我直接转到url.com/home，则“主页”按钮不会突出显示。

<li nz-menu-item routerLink="/home" routerLinkActive="active">
   <span title><i nz-icon type="home"></i>Home</span>
 </li>   
<li nz-menu-item routerLink="/about" routerLinkActive="active">
   <span title><i nz-icon type="info-circle"></i>About</span>
 </li>

如何更改在打开特定路线后随时突出显示该项目？

Answer 1

那是因为您不应该自己触摸URL。这样做时，您不会将路由事件发送到Angular。

尝试浏览两次该URL，这将重新加载您的页面：以此，您的应用程序将重新加载，有效地发送路由事件。

如果您希望实现所需的行为，则必须listen to URL changes并重新加载您的实际路线。

Answer 2

由于您使用的是ng-zorro，因此可以为nzSelected标签使用li属性来确定是否应突出显示该标签。在组件打字稿中插入Router，然后检查当前网址是否与菜单项匹配

HTML

<li nz-menu-item [nzSelected]="this.isSelected('/home')" routerLink="/home" routerLinkActive="active">
   <span title><i nz-icon type="home"></i>Home</span>
 </li>   
<li nz-menu-item [nzSelected]="this.isSelected('/about')" routerLink="/about" routerLinkActive="active">
   <span title><i nz-icon type="info-circle"></i>About</span>
 </li>

TS

constructor(private router: Router)
...

isSelected(route: string): boolean {
    return route === this.router.url;
}

Answer 3

如果您在版本10中使用ng-zorro-antd软件包，则[nzMatchRouter]上有一个名为nz-menu-items的属性，该属性根据路由器链接设置nzSelected

https://ng.ant.design/components/menu/en#%5Bnz-menu-item%5D

有了这个，您不需要像@kounex所述的任何其他打字稿

<li nz-menu-item routerLink="/home" [nzMatchRouter]="true" routerLinkActive="active">
   <span title><i nz-icon type="home"></i>Home</span>
 </li>   
<li nz-menu-item routerLink="/about" [nzMatchRouter]="true" routerLinkActive="active">
   <span title><i nz-icon type="info-circle"></i>About</span>
 </li>

突出显示当前路线项目，而无需单击它

3 个答案: