Ограничить, сколько раз директива выполняет метод - PullRequest
Новая
       10

Ограничить, сколько раз директива выполняет метод

0 голосов
/ 20 июня 2019

У меня есть список кнопок, которые направляют на различные ссылки: 

<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 раз.

Что было бы лучшим решением, чтобы избежать выполнения метода столько раз на каждомсмена страницы?

Ответы [ 2 ]

1 голос
/ 20 июня 2019

Из документов для 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: Я написал Среднюю статью об улучшении производительности в Angular Apps. Несмотря на то, что основное внимание уделяется формам Angular Reactive, методы повышения производительности по-прежнему будут в значительной степени. Вы можете проверить это здесь .

1 голос
/ 20 июня 2019

Ваш isSelected метод бесполезен, если у вас есть routerLinkActive.

Попробуйте вместо этого: 

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

А чтобы ответить вам, можете использовать 

changeDetectionStrategy: ChangeDetectionStrategy.onPush

В вашем компонентном декораторе ограничить обнаружение изменений, когда вы хотите, чтобы он запускался.

...