Как правильно байндить в англуяр?

Question

[Samat]

Вчера возник спор
И так, есть два вариант байнда, например класса:

1) есть массив данных и класс берется оттуда

div [class]="elelent.class"

elements: {
id: number;
class:  string;
}

2) Отправляем в байнд класса метод getClass()

div [class]="getClass(id)"

getClass(id: number): string {}

Я считаю, что второй вариант (с методом в байнде) не приемлем, потому что заметил, что при любом скролле или событии в браузере он каждый раз вызывается, что плохо влияет на производительность фронта

И я стал искать, а можно ли вообще и рекомендуется ли байндить что то подобным образом, в документации я по этому поводу ничего не нашел, более того нашел то, что так можно делать в разделе best-practices....
И я не понимаю почему оно так устроено и почему так вообще делать можно, если оно так пагубно влияет на производительность.

Вo VUE кстати есть computed свойства, которые как раз дают желаемые эффект. Перерендерится только в том случае, если что то изменилось, вообщем то хотелось бы на ангуляре добиться подобного

Answer 1

[Антон Швец]

Все вычисляемые или просто асинхронные вещи нужно хранить в Observable. Будет полный аналог вашего computed.
Например есть переменная
src = new BehaviorSubject(1);

От нее вычисляем класс

myClass = this.src.pipe(map(v => v === 1 ? 'one' : 'two'))

В шаблоне будет
div [ngClass]="myClass | async"

При изменении src, т.е. src.next(2)
Будет пересчитан myClass (один раз) и изменится шаблон (тоже один раз, если нет других причин для изменений и стоит on-push)
А если его нигде не запросить, то пересчета не будет, т.к. это ленивое вычисление, так же как и computed.

Подобным образом менеджатся любые данные и события, и это гораздо более гибкая система, чем скрытые геттеры-сеттеры в vue, хотя иногда более многословная. И требует больше времени на освоение.