限制指令执行方法的次数

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

如果你有 routerLinkActive，你的 isSelected 方法就没用了。

试试这个：

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

并回答你，可以使用

changeDetectionStrategy: ChangeDetectionStrategy.onPush

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

Answer 2

来自 RouterLinkActive 指令的文档：

Lets you add a CSS class to an element when the link's route becomes active.

这实际上就是 [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: I've written a Medium Article about Performance Improvement in Angular Apps. Although it's mainly focused on Angular Reactive forms, the performance improvement techniques will still be pretty much. You might want to check it out here.

限制指令执行方法的次数

Limit how much times directive executes the method

angular

ng-zorro-antd