ОПТИМИЗАЦИЯ ОБРАБОТЧИКОВ СОБЫТИЙ [ANGULAR] - GUIDE

[@DreyLikyDev]

Видео вышло как обычно, скажем так, ПРОДОЛЖИТЕЛЬНЫМ :D Я за такие мувы прошу прощения... Зато я расписал тайм-коды :з Приятного просмотра!

[@bukanaka]

Пусть будут длительными, но содержательнымия, я только за

[@ТарасСюсько-х2ж]

Очень сильный контент, спасибо )

[@maxonbigbon]

Это капец как классно, в копилочку, информация полезная

[@alenalel1267]

Ух, жоска, но интересно))

[@konstantinkim4148]

Круто

[@yahorananich6659]

Спасибо за видео! Продолжай в том же духе, такого контента действительно очень мало в ру-интернете. Что касается твоих примеров, они конечно все навороченные, есть над чем подумать и т.д. но вот что я заметил - твое видение задачи очень сложное. Я бы реализовал ну прям сильно просто: - сервис который запоминает выбранный элемент currentSelected - общее событие на документ - использование event.target - по которому я всегда буду получать элемент по которому кликнул - в сервисе простой бизнес (если target выбран - то ничего, если не выбран - то currentSelected.select(false) a target.select(true), ну и если target не является табличным элементом то currentSelected.select(false) Вроде понятно написал ;) и года в сервисе три строчки и одно общее событие. Ну как-то так.

[@IRemezov]

Спасибо! takeUntill нужно жеж последним по порядку включать в pipe?

[@DreyLikyDev]

Привет) Да, всё верно. Я на момент записи этого видоса не знал о таких подводных камнях takeUntil. Всё еще не дошли руки чтобы сесть и нормально разобраться с ним, поэксперементировать... Спасибо за наблюдательность)

[@volodimiryemshyn715]

Мне почему то очень не ловко после просмотра данного видео :( Глубокая депрессия ..... Спасибо за такое информативное унижение :)

[@DreyLikyDev]

Это состояние нужно перебороть, ибо такое чувство будет так или иначе - всегда. Всегда что-то не знаешь и есть чему поучится. Для начала нужно понять для чего нужна та или иная инфа которую ты обнаружил но не знаешь. Затем, запомнить что она существует... После чего, подумать где и когда ты можешь это применить. Ну и когда наступит этот момент - начать углубляться, изучать и применять. Успех неизбежен :D

[@bukanaka]

Угловые технологии)))

[@Boris1990ua]

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

[@DreyLikyDev]

Спасибо за фидбек. Если не сложно, можешь уточнить какие именно вопросы возникали? Хотел бы понимать проблемы и что можно в следующих видосах улучшить. Буду благодарен)

[@Boris1990ua]

@@DreyLikyDev Зачем вешать события на каждый компонент, зачем всем компонентам слушать dom click, зачем переносить подписчиков в отдельный сервис? Ты всё отлично разъяснил, просто сразу было чувство что это не оптимально и был сильный соблазн сразу посмотреть последнее решение.

[@DreyLikyDev]

@Boris1990ua да, я понял) Всё зависит от уровня разработчика. Думаю, если особо не задумываться над тем что ты делаешь, мне кажется что самая первая реализация может быть вполне чьим-то результатом работы на реальном проекте. Особенно, если разработчику не поставили задачу сделать универсальный шаренный компонент, а он просто пилит компонент для конкретной страницы со схожей логикой=) Энивей, я поэтому и расставил таймкоды чтобы удобно можно было чекнуть интересующие моменты :)

[@SergioUkrAr]

Супер, спасибо, интересные походы оптимизации, по больше того материяла). еще такой вапрс, а зачем использываешь index.ts в grid-item ?, это вместо модуля?

[@DreyLikyDev]

Спасибо) index.ts файлы - это распространенный подход для упрощения импортов. В купе с path aliases в tsconfig это делает работу с импортами намного приятнее за счет возможности компактно всё импортировать в одну строку. Так, например, в grid-item, index.ts экспортирует компонент. Благодаря этому, в модуле страницы я пишу: import { GridItemComponent } from './grid-item'; Вместо: import { GridItemComponent } from './grid-item/grid-item.component'; Но это не лучший пример чтобы показать упрощение импортов, рекомендую загуглить и почитать об этом подробнее=)

[@SergioUkrAr]

@@DreyLikyDev Большое человеческое спасибо), но я так просто не отстану)), я просто хочу углубленно изучять ануляр так как он мне нравится, и вот еще вопрос, я обротил внеманя на твою библиотеку, ngx-os там ты расширяешь классы базовыми абстрактными классами, это номальная практика в ангуляре?, я просто еще не видел что бы в ануляре так раширяли, так обычно делают в ооп. тойсть вопрос можно ли в проэктах так пользыватся?.

[@DreyLikyDev]

Angular это про ООП. Соответственно, всё что практикуется в ООП, практикуется и в Angular =) Наследование это непростая тема и следует четко понимать, что в конкретном месте нужно именно оно. Иногда могут быть уместными другие подходы организации кода. Вот пара примеров наследования в компонентах Angular Material: github.com/angular/components/blob/master/src/material/select/select.ts#L1163 github.com/angular/components/blob/master/src/material/tree/tree.ts#L31

[@golotus]

Материал первоклассный! Зануда мод он: Обзёрвер.

[@КонстантинХ-у4ф]

полезно очень, но сам-то как - в теробороне? перешел на мову полностью?

[@biovawan]

Привет! Спасибо за твои уроки! Как слушать события только у динамического компонента, который показывается через RouterModule? Дано: {path:':id',component:EditComponent} class EditComponent { @HostListener('click',['$event'])hostClick(e:Event) { // слушать только хоста. Игнорировать внутренние компоненты } } Заранее спасибо!

[@biovawan]

preventDefault и stopPropagation не помогли. Единственное решение это if (e.path.some(p => p.localName === 'section')) { // Не исполнять, если клик по вложенным или глубже return; }

[@DreyLikyDev]

Привет, спасибо) Если необходимо отследить клик именно по нашему элементу и игнорировать всплывающие клики сделанные по дочерним элементам, можно сделать логичное условие с этой проверкой: class EditComponent { constructor( private readonly hostRef: ElementRef ) {} @HostListener('click', ['$event']) public onClick(event: PointerEvent): void { if (event.target === this.hostRef.nativeElement) { console.log('click on our target host element'); } } }

[@DreyLikyDev]

Или же более декларативный вариант с использованием RxJS: class EditComponent implements OnInit, OnDestroy { private readonly viewDestroyed$ = new Subject(); constructor( private readonly hostRef: ElementRef ) {} public ngOnInit(): void { this.initClickObserver(); } public ngOnDestroy(): void { this.viewDestroyed$.next(true); this.viewDestroyed$.complete(); } private initClickObserver(): void { fromEvent(this.hostRef.nativeElement, 'click') .pipe( filter((event) => (event.target === this.hostRef.nativeElement)), takeUntil(this.viewDestroyed$) ) .subscribe(() => console.log('click on target host element')); } }

[@biovawan]

@@DreyLikyDev Благодарю за подсказки! Буду тестировать)