Тёмный

Разработка Menu UI компонента. HostBinding, HostListener. Как подписаться на window в Angular? 

Максим Гром
Подписаться 8 тыс.
Просмотров 5 тыс.
50% 1

Опубликовано:

 

15 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 66   
@grommaks
@grommaks 2 года назад
Привет всем :) Если вы случайно попали на это видео, то можно начать проходить плейлист с начала Со знакомства с Angular ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-IrelRVjIttA.html Или с компонентов Angular ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-U5d_FtO_3NA.html А если не случайно, то приятного просмотра и спасибо за активность под этим и остальными видео у меня на канале
@bukanaka
@bukanaka 2 года назад
Оооо, взрослый контент)
@davidbuloyan1036
@davidbuloyan1036 2 года назад
👋👋👋
@alex330k47
@alex330k47 2 года назад
О да, Сиси Кеэпвелл. Я не видел его 25 лет но оказалось что до сих пор помню как его зовут. Респект Макс!
@grommaks
@grommaks 2 года назад
Ну фамилию его я не знал даже 😺
@vovamaestre1136
@vovamaestre1136 2 года назад
После просмотра 2-х последних видео, могу с уверенностью утверждать что здесь заявка на лучший контент по ангуляру в СНГ сегменте! Спасибо за контент
@grommaks
@grommaks 2 года назад
Спасибо за такую крутую оценку) скоро больше контента
@vovamaestre1136
@vovamaestre1136 2 года назад
@@grommaks Пишу это не просто так, поскольку у меня есть опыт продакшин разработки > 1 года, но правда на angularjs, но сейчас перешли на гибрид
@serdotsenko
@serdotsenko 2 года назад
наконец пошли уже нормальные взрослые темы ) у мня идея для будущих видео, это по мимо обзора концепций, делать видосы по решению типовых повседненвных задач с использованием бэст-практик, что-то типа кук-бука для Ангуляра. например как сделать несколько асинхронных запросов, когда нужно дождатся выполнения каждого из них и полученные результаты используются в следующем и когда не нужно, механизмы обмена данными между родительским и дочерним компонентом, или когда эти компоненты вообще не связаны друг с другом и т.д. ну думаю ты лучше мня знаешь с чем кажды день сталкиватся Ангуляр-разработчик
@grommaks
@grommaks 2 года назад
Да, по мере роста базы, так и планировал разбавлять примерами которые будут собирать концепции нескольких уроков :) Это видео маленький пример того, что я хочу ^_^
@nexgenua
@nexgenua 2 года назад
По первому вопросу с "несколько асинхронных запросов" то тут ангуляр не при чем, это же rxjs, всякие zip, zipAll, там ничего военного. Обмен данными между компонентами тоже все просто, обычные сервисы с обсерваблами subject или behaviourSubject, в зависимости от задачи, нужно ли текущее значение, ну или ngrx, но там в доке и так все понятно. Вот и весь бестпрактис.
@KvN-UA
@KvN-UA 2 года назад
Інформативний урок, дякую! Давненько не було нічого нового на каналі, сподіваюсь в тебе все добре.
@vitaliybendik6916
@vitaliybendik6916 2 года назад
Очень классное решение этой задачи, прям гениально)
@njsaab9722
@njsaab9722 Год назад
cупер, супер, супер- спасбо большое
@awesomeuser789
@awesomeuser789 2 года назад
Как всегда лайк и коммент до начала просмотра) Летим!!!
@mykolastrashok9986
@mykolastrashok9986 2 года назад
Как всегда полезно и четко! Хотелось бы узнать будут ли видео про тесты в angular? И спасибо за труд!
@grommaks
@grommaks 2 года назад
Тесты будут, но по плану это через около 4х плейлистов... Ориентировочно через пол года может начать появляться контент по тестам
@diatm1506
@diatm1506 2 года назад
Долго ждал. Интересно конечно будет узнать приемущества кастомных деректив. Хочу узнать например в слайдере есть 2 кнопки next и prev в 1 дерективе есть возможность вешать по клику например 2 метода на prev и next handleNext, handlePrev или обработать сразу 2 события? Например клик и если курсор мыши не в поле зрения компонента если не ошибся mouseout то слидер будет листать слайды через 3 секи сам или взависимости от настроек в компаненте. Или нужно много деректив? Например audio player там столько событий... и там в какой-то книге шаблон применялся для плеера
@grommaks
@grommaks 2 года назад
Нужно делать так, чтобы пользоваться было легко клиентам такого кода, и чтобы когда нужно будет добавить новый функционал в ядро никому ничего не сломать Все остальное вкусовщина…и специфика конкретного решения
@ayub2003
@ayub2003 8 месяцев назад
Ма шаа Аллах1 брат, хорошие видео
@nexgenua
@nexgenua 2 года назад
👍 классные видео! Вдарить еще по ранимой реактовской психике 😊 (не хейчу библиотеку если что) Resolve гвардами, Reuse stratage и сборкой апки для плеймаркета с деплоем, а то народ вроде знает, что угловатый это фреймворк, а вот в чем его фреймворкость и сила до конца не понимают
@grommaks
@grommaks 2 года назад
Со мной в фирме работают 600 человек на angular и из них деплоями и разбиением занимаются пару человек, я не в их числе))) я больше по ООП и модульной архитектуре…вот когда ковырну описанные практики, то обязательно запишу)
@rockyshwilly
@rockyshwilly Год назад
Очень круто, понятно как все связано, но не понятно почему оно так работает)) Может одна я такая зануда)) Спасибо за видео и объяснения! Максим, а есть ли у Вас видео как работать с запросами на backend и как о том, что может быть альтернативой redux в react? А то я пока не понимаю как работать со "стейтом", если его надо передать глубже, чем на одну вложенность, не передавать же дальше через Output - Input?
@grommaks
@grommaks Год назад
Если плейлист с начала смотрели, то должно быть понятно) иногда нужно несколько раз посмотреть и повторить примеры для закрепления)
@alexshubin1
@alexshubin1 Год назад
Максим, благодарю за конент. Совсем недавно делал меню и остановился на том, как клик снаружи отработать. Надо проверить, мне кажется что host-context(.hidden) тоже самое что :host { .hidden { ... }} По ссылке на гитхабе кода урока нет, там просто пустой ангуляр проект.
@grommaks
@grommaks Год назад
Странно, проверил ссылку готового урока и код там есть, там две ссылки, первая с кодом и вторая с начальным состоянием для самостоятельной работы
@KolkhozDnepr
@KolkhozDnepr 2 года назад
Лайк и вечная подписка)))
@grommaks
@grommaks 2 года назад
😎
@roman_cooper
@roman_cooper 2 года назад
спасибо)
@YuriiD-y1b
@YuriiD-y1b 2 года назад
Cool
@JlocbBTpaHcE
@JlocbBTpaHcE 2 года назад
Крутой плей лист конечно, я уже 2 года работаю с Ангуляром, но мы никогда на работе не использовали ,и ну и по этой причине никогда не вставляли ничего в верстку между тегов компонента, а делали ее внутри html файла самого компонента, насколько это правильный подход и как делать лучше, какие плюсы и минусы?
@grommaks
@grommaks 2 года назад
Ваш подход для маленьких проектов самое оно Мой подход на больших Мой подход сложнее в реализации и понимании но позволяет сильно переиспользовать код, что удешевляет тестирование и поддержку Если цель сдать и забыть, то можно не тратить на это время и силы
@JlocbBTpaHcE
@JlocbBTpaHcE 2 года назад
@@grommaks Да вот именно что приложение просто огромное и включает в себя много маленьких приложений, в понедельник буду готовить 5-6 шаблонов экранов, пока сервисы пишутся. Попробую применить полученные знания на практике, главное что бы начальник не сильно ругался что я от концепции написания компонентов далеко ушел.
@grommaks
@grommaks 2 года назад
@@JlocbBTpaHcE сразу на проект тянуть новые знания это большой риск, лучше поковыряться в пет проекте вечерком, потом понять что подходит и взять в проект
@JlocbBTpaHcE
@JlocbBTpaHcE 2 года назад
@@grommaks ну да в целом вы правы.
@yevhen3934
@yevhen3934 2 года назад
Привет, Макс! Хорошее видео :) Спасибо, что быстро и понятно представляешь материалы! Мне вот интересный такой вопрос - какое преимущество того, чтобы использовать HostBinding для установки классов нашего хоста, перед самым обычным wrapper'ом/контейнером в темплейте, которому мы будем устанавливать данный класс? Ну, например, используя то же самый [ngClass] или [class] для div'а. Также интересно твое мнение о ситуации, когда у нас есть компоненты и часто приходиться добавлять какой-то div в качестве контейнера с какими-то стилями. И я вот видел, что этот контейнер убирают вообще с этими классами, и помещают эти классы в TS-файл, используя HostBinding. С одной стороны это идея, которая может существовать - у нас нету постоянных этих wrapper'ов в компонентах, придерживаясь данного стиля. Но как я думаю об этом - это лишнее. Зачем использовать мощь Ангуляра ради таких вещей (именно лишь для устранения контейнеров в верстке), превращать это в JS-код в bundle'ах, когда можно взять нативщину HTML + class атрибут :) Будет просто и понятно + не надо будет при просмотре темплейтов открывать каждый раз TS-файл, думая "а вдруг там что-то есть". Что скажешь об этом, стоит ли оно того?
@grommaks
@grommaks 2 года назад
Привет) спасибо за отзыв. В компонентах HostBinding используют редко, чаще обертки делают, тут все верно Но hostBinding это способ повлиять на общий между родителем контейнер, и как понимаешь что родитель уже не будет заморачиваться, а логика будет спрятана в ребёнке, не всегда UI либу делает тот же человек что и пользуется ею… Почему нужно бороться с лишними дивами? А не нужно, до тех пор пока это не интернет магазин или блог, где Гугл будет срезать поисковые баллы за грязную верстку…если сайт приватный, то тут и заморачиваться не нужно HostBinding часто используется в директивах, о чем мы будем говорить, и ещё часто используется в svg компонентах, когда мы не можем раскидываться лишним враппером… А так всегда нужно ходить в ts файл и смотреть какие инпуты туда передаются и на что можно подписаться )
@yevhen3934
@yevhen3934 2 года назад
@@grommaks , а, вот оно как) Я думал, что это какие-то лишние действия, а оказывается полезная штука в этой ситуации) Спасибо за ответ! Также есть ситуация, когда у нас есть враппер для какой-то директивы, например scrollToBottom, то здесь HostBinding не поможет, как я понял. Нужно тогда будет или её динамически сетить с ТС кода, ну или же просто на сам хост повесить в родительском компоненте.
@grommaks
@grommaks 2 года назад
@@yevhen3934 враппер это компонент?
@yevhen3934
@yevhen3934 2 года назад
@@grommaks не, просто div в дочернем компоненте
@grommaks
@grommaks 2 года назад
@@yevhen3934 если на враппере висит директива то поможет, иначе нужно байндить через привязки компонента
@murakami374
@murakami374 2 года назад
Привет Максим, досмотрел ролик до момента с тем, где ты в :host положил класс (.menu) , судя по тому, что я нагуглил, вложенность это фишка SCSS , а я делал все на CSS, то есть дальше нет смысла продолжать, мне нужно пересоздать проект?
@grommaks
@grommaks 2 года назад
Привет, можно просто переименовать файл на Scss и должно работать без доп настроек Можно ещё самостоятельно прописывать css код, превращать мои записи в чистый css, я там только вложенностями пользуюсь, это не сложно переписать на обычный css
@murakami374
@murakami374 2 года назад
@@grommaks если честно, не знаю как это переписать) попробую просто поменять расширение на scss
@grommaks
@grommaks 2 года назад
@@murakami374 желательно почитать что такое scss) Все вложенности через пробел пишутся, если есть символ & то без пробела (это склейка с прошлым селектором)
@AlexUrsulov
@AlexUrsulov 2 года назад
Спасибо за видео, не подскжите как позиционировать host элементы?
@grommaks
@grommaks 2 года назад
Есть видео по стилям в angular у меня на канале Вроде как в файле scss пишем селектор :host и дальше верстаем
@belerafon9288
@belerafon9288 2 года назад
А про порталы будет что то? Это же меню через портал было бы интересно посмотреть.
@grommaks
@grommaks 2 года назад
Это cdk модуль, пока по нему не будет ничего
@belerafon9288
@belerafon9288 2 года назад
@@grommaks не именно материаловикий, а вообще такой патерн, для правильного проэцирования выподашек в дереве.
@grommaks
@grommaks 2 года назад
@@belerafon9288 материал использует angular/cdk, причём по исходникам я смотрел что материал добавляет очень мало в оригинальный cdk, считай ui составляющую. Как это сделать без cdk хочу понять, но уже после базовых плейлистов (когда будет понятно о директивах и сервисах) P.s. Посмотрел на entry components, они уже deprecated :(
@belerafon9288
@belerafon9288 2 года назад
@@grommaks у тинькова есть тайга, там изобрели свои порталы, поже смотрел но до конца понять их не могу, через сервисы они управляются это да, но как то сложно.
@grommaks
@grommaks 2 года назад
@@belerafon9288 спасибо за наводку) попробую ковырнуть
@user-san-chous
@user-san-chous 2 года назад
в нас на проекте HostBinding и HostListener с самого начала проекта нерекомендованы, насколько помню, так как давно уже о почти забыл об их существовани)) тимлид назвал их тяжелыми (в плане отработки) и устаревшими, если не ошибаюсь. То то скрытие, что в примере, делал бы через ngIf, наверное
@grommaks
@grommaks 2 года назад
ngIf убивает DOM елементы и убивает компонент...а при появлении будет все это снова создавать и создавать компонент. Это существенно нагружает чем HostBinding А как с директивами работаете тогда?
@user-san-chous
@user-san-chous 2 года назад
@@grommaks ну вместо ngIf можно и hidden. А вот по поводу HostBinding и HostListener, то нигде не нашел никаких подтверждений их проблемности(( и в группе по Ангуляру админ говорит, что такого не слышал. Возможно наш тимлид говорил только о HostBinding, а HostListener я уже сам приплел. Может ему просто статья какая-то на медиуме попалась субъективная... Не, на проекте то есть конечно единичные случаи использования. Например, директива для отлавливания кликов за пределами блока использует только HostListener и еще одна использует вижу HostBinding, хотя сама нигде не применяется) Ну в целом ото и все... А кейсы в видео понравились, то только через пол года от начала проекта задумался, действительно ли то плох HostBinding...
@grommaks
@grommaks 2 года назад
@@user-san-chous hidden это visibility hidden который не удаляет елемент из потока html, а лишь его скрывает. Посмотрите разницу между ними)
@user-san-chous
@user-san-chous 2 года назад
@@grommaks атрибут [hidden]="true" - это не свойство visibility: hiden. Запутали меня) специально ходил проверял. Этот атрибут добавляет display: none, что аналогично примеру в видео будет. и надо еще раз будет пересмотреть видео, но если там хостилистенеры в дочерных компонентах, то лучше ngIf применять, имхо.
@grommaks
@grommaks 2 года назад
@@user-san-chous тогда я пойду ещё почитаю)
@user-san-chous
@user-san-chous 2 года назад
Что-то запутался... Не правильнее ли там использовать :host(.hidden) вместо :host-context(:hidden). Клик же в примере вешает класс на хост, а не оборачивает его в этот селектор... host-context вроде же для второго предназначен... Как оно тогда отрабатывает... Ну это надо будет потестить...
@grommaks
@grommaks 2 года назад
Может я и напутал, хост работает только с хостом, хост контекст добавляет селектор спереди как глобальный, таким образом класс на боди будет влиять на стили
@maksmaksim4803
@maksmaksim4803 2 года назад
как увидеть 5 недоступных видео которые скрыто?
@grommaks
@grommaks 2 года назад
Дождаться их публикации, по старому графику, 2 раза в неделю, вт и птн в 10 утра А пока они публикуются, я работаю над следующим плейлистом 😃
@maksmaksim4803
@maksmaksim4803 2 года назад
так так так, с такими уроками, я начинаю понимать что в этот раз мне таки поддастся ангуляр)))) За что тебе огромадное спасибо))
@AndrewYurchenko
@AndrewYurchenko Год назад
По существу в Ангуляр использовать display:none конечно можно, но все же.... Предпочтительнее думаю было бы *ngIf. Все же это ангуляр а не просто HTML & CSS в голом виде. Также, вот это слово "биндим" ... А русский и английский не ферштейн похоже. Сказать "привязываем" похоже автор не понимает. Все же, если видео заточено на обучение - то и должно нести языковую нагрузку и смыл передавать на том языке, на котором транслируется. По поводу "HostBinding" и "HostListener" в общем нормальное объяснение, за исключением вышеописанного.
Далее