Question

我有一个指向各种链接的按钮列表：

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

我使用指令[nzSelected]和功能：

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

突出显示当前打开的路线的按钮。我注意到一个问题-这会使性能变差，因为在每次更改路线时，方法“ isSelected”都会被启动100次以上。

避免在每次页面更改时执行太多次方法的最佳解决方案是什么？

Answer 1

如果您有isSelected，那么您的routerLinkActive方法就没有用。

尝试以下方法：

<li nz-menu-item [nzSelected]="homeRla?.isActive" routerLink="/home" routerLinkActive="active" #homeRla="routerLinkActive">

要回答您，可以使用

changeDetectionStrategy: ChangeDetectionStrategy.onPush

在组件装饰器中，将更改检测限制为您希望其运行的时间。

Answer 2

摘自RouterLinkActive指令的文档：

允许您在链接的路由变为活动状态时向元素添加CSS类。

[nzSelected]="isSelected('/home')"基本上就是您要做什么。

routerLinkActive 为您提供了开箱即用的功能。摆脱[nzSelected]="isSelected('...')"，您应该会很好

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

PS：我已经写了Medium Article关于Angular Apps中的性能改进。尽管它主要集中在Angular Reactive窗体上，但是性能改进技术仍然会很多。您可能要签出here。

限制指令执行方法的次数

2 个答案: