ngOnChanges vs ngDoCheck. ChangeDetectionStrategy OnPush в Angular 

Только проект этого курса (ссылка в описании) 😺так нужно больше часов пытаться и будет эффект) по другому не получается учиться

@@dmytrokapustiuk9531 привет 👋 Set и get я бы не рекомендовал использовать :) Get должен выполнять очень простую операцию, причем детерминированную (которая всегда вернет тот же результат если параметры не изменились) и тогда все будет нормально с производительностью. Как делать не нужно, в getter делать новый observable (через добавление динамически pipe к существующему observable), также не нужно копировать объекты в getter, иначе поменяется ссылка Какие паттерны есть для того чтобы не иметь геттер и сеттер ( или иметь их более надежном виде ) 1) ngOnChange для запуска перерасчета и сохранения в свойство компонента 2) rxjs стрим, все можно конвертировать в стримы и описать логику расчета один раз в ngOnInit (тут бы я держал слой умного и простого компонента) 3) новая фича - signals поможет сделать это красивее с точки зрения кода Ну и разумеется, тяжелые вычисления, если сильно хочется во время отрисовки их делать, то можно вынести в pipe, как минимум если это по SOLID и более одного компонента будут использовать это (гипотетически или практически)

Об этом я буду говорить в следующем плейлисте) но подход с передачей Observable мне не нравится, больше нравится распечатывать их в момент привязки

@@grommaks я использую behaviorsubject так же в свсязке с async pipe в шаблоне

@@G3tf если subject пришёл из сервиса то круто) в компоненте мне кажется это оверхед:)

@@grommaks и из сервиса бывает) и бывает из компонента родительского)

@@G3tf стараюсь обсервабл не передавать как параметр) но слышал что это как подход используется В компоненте использую если хочу на rxjs всю логику данных описать, тогда события перекидывают в Subject и в потоке обработка идёт, тоже подход со своими плюсами

Атомный самурай из one punch man сразу вспомнился)

@@raprap630 это грустная часть angular, что это легче сделать чем в других решениях Нужно придерживаться иммутабельного подхода, NGRX позволяет хранить данные с учетом иммутабельности Обычно все придерживаются такого подхода, с этим нет больших проблем, но рефакторить старый код сложно…

При OnPush сработает на Input и на привязки событий в шаблоне, такие как (click) и прочие, также сработает если повесили HostListener Насчет прямого element.addEventListener или асинхронных вызовов, то это будет работать при default, так как zone.js будет это отслеживать.

Спасибо за интересный вопрос Пока приходится поддерживать версии от 6 и выше, а также поддерживать IE в некоторых проектах, то я бы не стал переходить Явной рекомендации использовать такой подход нет, под капотом TS может сам это оптимизировать если это важно. Вывод, я бы не стал спешить, но знать о новинках нужно

@@grommaks благодарю за скорый ответ и за твои труды! Твой контент уникален, на могу взгляд) желаю успехов!

Думаю запросы в сервисе делаются Тогда данные в сервисе надо хранит в BehaviorSubject чтобы компонент мог подписаться на изменения Если запрос в компоненте, то возможно стоит OnPush стратегия определения изменений, тогда нужен вызов changeDetectionRef.markForCheck() В момент обновления данных внутри компонента

​@@grommaks пока что не получается, в сервисе у меня такое: getLists(){ return this.http.get(this.baseUrl); } В компоненте, который это отображает такое: ngOnInit(): void { this.listsService.getLists().subscribe({ next: lists => { this.lists = lists.lists; this.listsNames = lists.listNames; } }) } А в компоненте, который вносит изменение на сервер вот такое: editList(){ this.listsService.editList(this.id, this.name).subscribe({ next: () => this.toastr.success("The list has been updated") }) }

Пока не получается сделать правильно, у меня такой код в сервисе: getLists(){ return this.http.get(this.baseUrl); } Такой в компоненте, где эти данные отрисовуются: ngOnInit(): void { this.listsService.getLists().subscribe({ next: lists => { this.lists = lists.lists; this.listsNames = lists.listNames; } }) } Такой в компоненте, где данные меняются: editList(){ this.listsService.editList(this.id, this.name).subscribe({ next: () => this.toastr.success("The list has been updated") }) }

Видео свежее, все актуально) спасибо за отзыв

Уже разобрался, моя ошибка. Я решил сократить код и просто печатал на прямую массив (я понимаю что это несколько странно). Так вот, если ссылка та же самая то изменения массива в таком случае вообще никак не вывести. Вряд ли это кому пригодиться (кто ж на прямую тупо массив выводит на экран), но вот такой интересный момент.