Огромное спасибо, лучшее объяснение ChangeDetectionStrategy OnPush так еще и вместе с ngOnChanges и ngDoCheck , круто что при объяснении все моменты четко проговариваются.
Спасибо. Очень хороший контент. Лаконично и практично. Было бы здорово, еще немного больше практических примеров как можно использовать doCheck, best practice...
Привет всем) В этом видео рассмотрим как оптимизировать обновление компонента, но при этом сделать его немного глупее...как вы поняли, немного разберемся в умных и глубых компонентах. Все это завязано на методах жизненного цикла ngOnChanges и ngDoCheck Приятного просмотра 👍
Отлично подана информация, особенно для новичков. Я некоторые моменты, в том числе и обсуждаемый в этом ролике, осознал только через несколько месяцев работы на проекте. От себя хочу сказать, что в инпуты можно передавать observable и выводить в вёрстке через async pipe, в этом случае не нужно заботится о перерисовке при OnPush
@@G3tf стараюсь обсервабл не передавать как параметр) но слышал что это как подход используется В компоненте использую если хочу на rxjs всю логику данных описать, тогда события перекидывают в Subject и в потоке обработка идёт, тоже подход со своими плюсами
Спасибо за труды)) вопросик - а у тебя нет случайно на Гите проектика с реализованными хуками, чтоб скачать развернуть подебажить, посмотреть вживую как что за чем работает? То вроде все понятно, а чувствую что начну писать и буду тупить)) то искал там что-то подобное, везде без хуков пишут...
Спасибо за материал. Но есть вопросик: onPush реагирует ТОЛЬКО на input? на Http request, addEventListener, setTimeout и тд реагирует стратегия default?
При OnPush сработает на Input и на привязки событий в шаблоне, такие как (click) и прочие, также сработает если повесили HostListener Насчет прямого element.addEventListener или асинхронных вызовов, то это будет работать при default, так как zone.js будет это отслеживать.
Для разбора темы повторил урок. Дерево Апп-Парент-Чаилд компоненты. В Апп сделал два метода, один мутирует массив, другой меняет ссылку (так же как в видео), не добавлял никаких changeDetection:ChangeDetectionStrategy.OnPush . Так вот при мутации данные на экране не меняются ! Наставил консолей в ngDoCheck , массив изменяется, видно в консоли, а отображение нет, в видео иначе. Я то вообще категорически против мутаций, но просто интересно, Ангуляр изменился от снятия видео ?
Уже разобрался, моя ошибка. Я решил сократить код и просто печатал на прямую массив (я понимаю что это несколько странно). Так вот, если ссылка та же самая то изменения массива в таком случае вообще никак не вывести. Вряд ли это кому пригодиться (кто ж на прямую тупо массив выводит на экран), но вот такой интересный момент.
Хочу спросить довольно общий вопрос про синхронизацию данных с сервером. Вот у меня есть Angular application, в нем нет роутинга, и в нем я делаю CRUD операции над данными. Они применяются, серверная часть срабатывает и меняется, но чтобы изменения увидеть визуально в клиенте, страницу нужно обновить. Как это исправить?
Думаю запросы в сервисе делаются Тогда данные в сервисе надо хранит в 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") }) }
Есть ли смысл переходить на родные js приватные поля с помощью '#'? Тем самым получили бы: #array: User[] = []; @Input set array(val: User[]) { this.#array = val; } get array(): User[] { this.#array; }
Спасибо за интересный вопрос Пока приходится поддерживать версии от 6 и выше, а также поддерживать IE в некоторых проектах, то я бы не стал переходить Явной рекомендации использовать такой подход нет, под капотом TS может сам это оптимизировать если это важно. Вывод, я бы не стал спешить, но знать о новинках нужно
Огромное спасибо, лучшее объяснение ChangeDetectionStrategy OnPush так еще и вместе с ngOnChanges и ngDoCheck , круто что при объяснении все моменты четко проговариваются.
Спасибо большое за урок! Очень доходчиво объясняешь и подаёшь материал. На ютубе почти нет годного материала по Ангуляру, спасает твой канал!))
Спасибо за урок! Такого качественного материала как у вас на русскоязычных контентах не встречал. Респект!
Хороший материал 👍 Мне прям последние ролики нравятся, качество растёт от роликак к ролику.
Мощь, обычно в обучающих видео многие мелочи опускаются. Буду рад видеть ещё подобные видео.
Спасибо. Очень хороший контент. Лаконично и практично. Было бы здорово, еще немного больше практических примеров как можно использовать doCheck, best practice...
Привет всем)
В этом видео рассмотрим как оптимизировать обновление компонента, но при этом сделать его немного глупее...как вы поняли, немного разберемся в умных и глубых компонентах.
Все это завязано на методах жизненного цикла ngOnChanges и ngDoCheck
Приятного просмотра 👍
Большое спасибо. Сейчас изучаю ангуляр и ваш канал мне очень помогает)
Спасибо большое за такой подробный урок! Узнал много нового.
Спасибо за старания )
Спасибо большое за лекцию! Просто, доступно, интересно. Теперь все по полочкам в голове :)
Thanks a lot.Usefull content.
Отлично подана информация, особенно для новичков. Я некоторые моменты, в том числе и обсуждаемый в этом ролике, осознал только через несколько месяцев работы на проекте. От себя хочу сказать, что в инпуты можно передавать observable и выводить в вёрстке через async pipe, в этом случае не нужно заботится о перерисовке при OnPush
Об этом я буду говорить в следующем плейлисте) но подход с передачей Observable мне не нравится, больше нравится распечатывать их в момент привязки
@@grommaks я использую behaviorsubject так же в свсязке с async pipe в шаблоне
@@G3tf если subject пришёл из сервиса то круто) в компоненте мне кажется это оверхед:)
@@grommaks и из сервиса бывает) и бывает из компонента родительского)
@@G3tf стараюсь обсервабл не передавать как параметр) но слышал что это как подход используется
В компоненте использую если хочу на rxjs всю логику данных описать, тогда события перекидывают в Subject и в потоке обработка идёт, тоже подход со своими плюсами
Одно из лучших видео по теме
Cool
Спасибо, хороший урок!
отличный контент
Спасибо за труды)) вопросик - а у тебя нет случайно на Гите проектика с реализованными хуками, чтоб скачать развернуть подебажить, посмотреть вживую как что за чем работает? То вроде все понятно, а чувствую что начну писать и буду тупить)) то искал там что-то подобное, везде без хуков пишут...
Только проект этого курса (ссылка в описании) 😺так нужно больше часов пытаться и будет эффект) по другому не получается учиться
perfect
"Атомные" уроки))
Атомный самурай из one punch man сразу вспомнился)
Спасибо за материал. Но есть вопросик: onPush реагирует ТОЛЬКО на input? на Http request, addEventListener, setTimeout и тд реагирует стратегия default?
При OnPush сработает на Input и на привязки событий в шаблоне, такие как (click) и прочие, также сработает если повесили HostListener
Насчет прямого element.addEventListener или асинхронных вызовов, то это будет работать при default, так как zone.js будет это отслеживать.
Для разбора темы повторил урок. Дерево Апп-Парент-Чаилд компоненты. В Апп сделал два метода, один мутирует массив, другой меняет ссылку (так же как в видео), не добавлял никаких changeDetection:ChangeDetectionStrategy.OnPush . Так вот при мутации данные на экране не меняются ! Наставил консолей в ngDoCheck , массив изменяется, видно в консоли, а отображение нет, в видео иначе. Я то вообще категорически против мутаций, но просто интересно, Ангуляр изменился от снятия видео ?
Видео свежее, все актуально) спасибо за отзыв
Уже разобрался, моя ошибка. Я решил сократить код и просто печатал на прямую массив (я понимаю что это несколько странно). Так вот, если ссылка та же самая то изменения массива в таком случае вообще никак не вывести. Вряд ли это кому пригодиться (кто ж на прямую тупо массив выводит на экран), но вот такой интересный момент.
Хочу спросить довольно общий вопрос про синхронизацию данных с сервером. Вот у меня есть Angular application, в нем нет роутинга, и в нем я делаю CRUD операции над данными. Они применяются, серверная часть срабатывает и меняется, но чтобы изменения увидеть визуально в клиенте, страницу нужно обновить. Как это исправить?
Думаю запросы в сервисе делаются
Тогда данные в сервисе надо хранит в 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")
})
}
Есть ли смысл переходить на родные js приватные поля с помощью '#'? Тем самым получили бы:
#array: User[] = [];
@Input set array(val: User[]) {
this.#array = val;
}
get array(): User[] {
this.#array;
}
Спасибо за интересный вопрос
Пока приходится поддерживать версии от 6 и выше, а также поддерживать IE в некоторых проектах, то я бы не стал переходить
Явной рекомендации использовать такой подход нет, под капотом TS может сам это оптимизировать если это важно.
Вывод, я бы не стал спешить, но знать о новинках нужно
@@grommaks благодарю за скорый ответ и за твои труды! Твой контент уникален, на могу взгляд) желаю успехов!