Angular lifecycle hooks. Методы жизненного цикла компонента
ฝัง
- เผยแพร่เมื่อ 2 ก.ค. 2024
- Компонент это маленькая подпрограмма, которая может быть использована другим компонентом или использовать другие компоненты.
Каждый компонент переживает этапы жизненного цикла:
- Создание
- Привязка инпутов и инициализация
- Регулярные проверки целостности верстки
- Инициализация верстки переданной от родителя (контент)
- Инициализация верстки детей (вью)
- Обновление контента и вью соответственно, по мере жизни компонента
- И удаление компонента из ДОМ
Все это отдельные темы для обсуждения, и мы поговоим обо всех тонкостях хуков и всего что с этим связано в следующих видео этого плейлиста
==============================
Код готового урока:
github.com/MaksymGrom/angular...
==============================
Инструкция по установке angular проекта:
Вариант 1:
Пройдите плейлист: • Как работает WEB. Мест...
Вариант 2:
Склонируйте github.com/MaksymGrom/angular...
Загрузите зависимости (npm install)
Можно запускать проект (ng serve)
==============================
Выбор редактора код это дело каждого, но в этом плейлисте я использую webstorm. Как настроить один из популярнейших редакторов ниже:
VS Code: • VS Code extensions для...
WebStorm: • WebStorm работа с angu...
Не забываем что SQL важен независимо чем планируешь заниматься при веб разработке, даже если планируешь быть менеджером проектов.
Курс по SQL можно найти по ссылке: • Что такое SQL? Как раб...
Спасибо что продолжаете смотреть меня и радовать комментариями.
---- Соц сети
Телеграм, где можно узнать о новых видео и получать доп контент
t.me/webDevGromMaxChannel
P.S. В youtube я отвечаю быстрее чем в telegram, буду рад комментам в youtube
----
Чтобы поддержать канал
1) Можно поставить лайк (или дизлайк, если не понравилось видео)
2) Оставить комментарий более 5 слов
3) Досмотреть видео до конца (так удержание будет выше и мне это поможет в продвижении)
4) Оставить отзыв в комментариях, что можно улучшить в видео, чтобы не хотелось его закрывать
#grommax #angular #lifecycle
Материально поддержать канал можно следующим способом
1) Перевод на карту send.monobank.ua/7oqmsFg3Y
2) Пройти опрос, чтобы помочь выбрать подходящие варианты поддержки
forms.gle/ZbFCKJSpDNYp4AMC6
Оглавление
00:00 - Введение
00:25 - Подготовка к уроку
01:19 - SOLID принциы и что такое методы жизненного цикла
02:47 - Как реализовать все хуки Angular компонента
03:47 - Очередность вызова методов жизненного цикла
06:13 - За что отвечают методы? Почему не вызвался ngOnChanges?
08:39 - Заставляем работать ngOnChanges & ngOnDestroy
10:51 - Проверяем очередность в консоли и тестируем все
![[TH] VCT Pacific Stage 2 - Week 3 Day 3 // DFM vs PRX | DRX vs TLN](http://i.ytimg.com/vi/il3Twexat3A/mqdefault.jpg)
![แม่กลองสองใจ - ซีแกรม โตเกียว มิวสิค [ OFFICIAL MUSIC VIDEO ]](http://i.ytimg.com/vi/GSQfVjcr_f4/mqdefault.jpg)
Привет) Хуки жизненного цикла нужны для многих задач, в этом и в следующих видео плейлиста мы рассмотрим множество задач из-за которых Angular разработчик использует хуки
А если пропустил прошлое видео, то посмотри его th-cam.com/video/SKwQthxmDBc/w-d-xo.html (Как сделать компонент контекстного меню)
А если пришел сюда случайно, то я собрал супер плейлист со всем курсом по ангулар, изучай его и ты обязательно прокачаешься th-cam.com/channels/lDDVLu0Cj_o9Y5D2ilCtdQ.htmlplaylists?view=50&sort=dd&shelf_id=1
Приятного просмотра и изучения Angular :)
Из всего того, что я видела, вы даёте более полный контент, спасибо )
Хороший контент для старту в Ангулярі! Дякую !
Максим, спасибо за хороший контент! Смотрю с удовольствием. На неадекватов время и нервы не растрачивай)
Отличное обучающее видео. Благодарю за работу и контент.
Cool
Отличный контент, продолжай, не останавливайся! Как всегда с меня лайк, коммент, подписка
Макс, Спасибо огромное за этот курс, это лучший актуальный курс по ангуляру в русском инете! огромное пожелание: если будет время то запиши курс по юнит и визуальным тестам плиз!
Как нормализуется обстановка, то я продолжу этот курс и там планировалось делать Уроки по unit тестам
Когда я слышу о "Хуках" я всегда вспоминаю Доту ( Butcher Skill 1)
Думал как красиво сделать превью...и писать метод жизненного цикла оказалось не очень читаемо и нельзя пирата из ангулара сделать)
@@grommaks Спасибо Максим! Планируете ли вы Курс по Ангуляру?
@@nouchance может вопрос про курс по nestjs?))) потому что вопрос под курсом по ангулару звучит странно о курсе по ангулару)
По nestjs не планирую
спасибо
Спасибо!
Хуки жизненного цикла ангуляр виды какие есть бывают жизненный цикл хук angular hooks lifecycle
привет, ты сталкивался в Neste с такими проблемами
1) Bidirectional circuit. т.е двунаправленная циклическая связь
9:20
2) forwardRef()09:19
Я использую Sequelize, это коммерческий проект
У меня есть таблица Service, кот. связана связью Много ко многим с двумя таблицами сразу: Unit и CatUnits
Не, я большие проекты на nestjs не делал, сейчас вышло так что работаю с .net
@@grommaks Хорошо спасибо
@@grommaks Проблему уже решили, за счёт упрощения структуры БД
привет, планируешь делать курс по реакту?
Привет, пока планирую пережить войну, а потом смотреть чем можно будет заниматься
@@grommaks Где вообще находишься во время войны? И как сейчас обстановка у тебя. Возможно есть уже понимание о сроке выхода продолжения курса по ангуляру и было бы круто есть бы сделал курс на подобии react samurai я думаю комьюнити Angular-щиков (как минимум их) тебя бы запомнило на долго. Мира и успехов тебе
@@user-dd9uh9lc5i сейчас в центральной Украине, через месяц скорее всего появятся новые видео на канале.
@@grommaks желаю тебе успехов и всячески буду поддерживать твой контент "Все буде Україна" завтра в час при своем плохом уровне английского буду проходить совбез в ITOP1000 тех задание сдал с отличием правда со второго раза так как тз было размытое
не услышал описание того, что за что отвечает, увидел только порядок вызова
Все верно, следующие 4ре видео раскрывают этот вопрос, продолжайте смотреть видео из этого плейлиста
"Жизненный цикл бывает не только у компонента , но и у директивы" ??????
Понимание есть того что такой сущности как компонент в Ангуляре нет ? Компонент это всё таже директива только со вьюхой
Компонент это наследник от директивы, так что есть такая сущность...
Это одно и то же что сказать: "Компонента не существует, компонент это тот же JavaScript объект только немного сложнее"
@@grommaks ты называешь наследника полноценной сущностью ? Ты действительно свой ООП изобрел))
@@user-fx3of4zx6s много агрессии, у меня ничего не поменялось с прошлого коммента…
@@grommaks ну это ты так мои слова воспринимаешь как агрессию , я не вижу в них ничего агрессивного , скорее всего ты просто убежден в своем и другого слышать не желаешь , боишься критики видать как огня
@@user-fx3of4zx6s проверил все ли хуки работают в директиве. Да все работают, и даже Content / View хуки
Критику я воспринимаю, не воспринимаю "тыканье" и претензии типа "Понимание есть что ..."
Компонент наследуюется от директивы. Говорить о том, что компонент не существует как самостоятельная сущность это как говорить что массивов не существует, а все это объекты. Мне как клиенту кода не важно какая реализация внутри, кто от кого наследуется. Я использую Компонент или массив и если завтра появится еще слой абстракции между ними или они будут разнесены на разные реализации, то это лишняя информация для новичка
В видео я имел ввиду что хуки есть у сервисов и директив тоже, не только у компонентов. То что компонент это наследник от директивы я говорил в одном из первых видео первого плейлиста.
P.S. Директива имеет весь набор хуков, компонент их наследует
Критику я воспринимаю
Спасибо за почти конструктивную критику 😁