ngFor перерисовывает любое событие в компоненте, даже если за пределами ngFor

Мои вопросы относятся к Angular (2) с использованием вилки RC1 из примера plunkr angular.io. Функция привязки данных в шаблоне ngFor работает так, как если бы обнаружение изменений было истинным для любого события за пределами ngFor. В моем примере нажатие кнопки за пределами ngFor.

Я пробовал использовать функцию trackBy и без нее (хотя в настоящее время у нее плохая документация, поэтому я не уверен, правильно ли я ее использую); Я не могу понять, как убедиться, что каждое действие не вызывает перерисовку ngFor, поскольку это может быть очень дорогостоящим.

Результат журнала при нажатии:

  1. кнопка
  2. рисунок
  3. рисунок

Вы можете увидеть проблему в реальном времени на этом plunkr, просмотрев журнал консоли:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
      <button (click)="clickOustideFunction()" >hi</button>
      <h1 *ngFor="let d of data;trackBy:a">
        My First Angular 2 App{{drawingForFunction()}}
      </h1>`
})
export class AppComponent { 
    data= [{"a":1}, {"a":2}];

    clickOustideFunction(): void {
        console.log("button");
    }

    drawingForFunction(): void {
        console.log("drawing");

    }

}

person sasonic    schedule 26.05.2016    source источник


Ответы (1)


По умолчанию все привязки шаблонов проверяются на изменение после каждого события. Обычно цикл NgFor будет иметь привязки, подобные {{data.a}}, и все эти привязки проверяются на грязные проверки каждый раз, когда запускается обнаружение изменений. Если вместо этого у вас есть функция, например {{drawingForFunction()}}, эти функции также будут оцениваться каждый раз, когда запускается обнаружение изменений.

Angular будет изменять DOM только в том случае, если он видит / обнаруживает изменение, поэтому ничего не будет повторно отображаться, если нет изменений. И повторно визуализируются только те элементы, которые были изменены (а не весь вид).

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

person Mark Rajcok    schedule 26.05.2016
comment
Не тот ответ, на который я надеялся, так как кажется легко сделать что-то плохо работающим, но я рассмотрю стратегии обнаружения изменений, которые можно использовать с помощью декоратора компонентов. Спасибо! - person sasonic; 26.05.2016
comment
Кто-нибудь найдет руководство по ресурсам, которое поможет предотвратить попадание в эту ловушку? stackoverflow.com/ questions / 54527055 / - person Elysiumplain; 12.02.2019