Чуть более трех месяцев назад я переехал в новый проект в моей компании и начал работать с угловой. До этого я работал исключительно с реагированием около двух лет.
Я сразу заметил, что кривая обучения для угловых – намного круче, чем для реагирования. И это, вероятно, более верно, если вы абсолютным новичком с нуля до небольшого опыта.
– Реактивный способ делать вещи
Например, чтобы начать здание с реакцией, вы можете использовать пакет NPM CRA (Create-React-App) для загрузки приложения. Затем вы можете открыть файл App.js и начните запись HTML-подобного (JSX), JavaScript и даже CSS-код – с помощью любых инструментов CSS-in-js, таких как STELLEDEDCOMPONENTS. Так что все проблемы попадают в один файл!
Вам также необходимо понять некоторые основные концепции, такие как компоненты, состояние и реквизиты. Плюс некоторые чрезвычайно основные материалы FP. И вот это, более или менее.
Конечно, все, как правило, становится все более сложной, так как сложность приложения растет. И есть больше концепций, шаблонов дизайна, библиотек и инструментов, необходимых для изучения и в конечном итоге мастера (например, React Router, Global Country Management, Redux, R-Thunk, R-SAGA, рендеринг методов оптимизации и т. Д.).
Но все это необязательно (не является частью библиотеки реакции Core). Большая часть дополнительных вещей поставляется в виде 3-го библиотек сторон.
– Угловой способ делать вещи
Угловая поднимает вещи на новый уровень. Если вы хотите построить знаменитый Чтобы сделать Список, «Hello World», эквивалентный в мире приложений с одним страницей, вы не можете просто загрузить угловое приложение и начать запись кода JavaScript в одном файле.
Во-первых, вы должны изучать угловые специфические абстракции и некоторые новые шаблоны дизайна, такие как компоненты, директивы, шаблоны, основы OOP, инъекция зависимости и многое другое.
Вы можете утверждать, что я сказал то же самое для реагирования. В обоих случаях вам нужно изучить конкретную библиотеку, базовые вещи, прежде чем построить что-либо. И это правда. Но на мой взгляд, угла имеет гораздо больше этого «основных вещей» по сравнению с реагированием.
Вам также нужно знать Tymdercript для записи угловых приложений. Это не обязательно, но это принятый отраслевой стандарт.
Также код HTML, CSS и TS изолирован в отдельных файлах. Это похоже на классический способ строительства веб-приложений, с четкой отделением проблем. Это имеет свои преимущества – но я думаю, что я предпочитаю, как реагировать это.
Как только вы освоите основы и начните думать, что вы, наконец, получаете вещами, вы передаете первый холм на кривой Dunning-Kruger, и падают с пика «гора глупо» на долину отчаяния.
– Вещи могут быстро стать сложными
В конце концов вы понимаете, что угла имеет гораздо больше вещей, запеченных в его ядро, чем реагировать (маршрутизатор, анимацию, RXJS) и что это полный панель инструментов разработки SPA. Вот почему люди называют это рамками. В отличие от реакции, который «просто» библиотека.
…
Текущая точка в моем угловом пути обучения, вероятно, где-то рядом с нижней частью кривой D-K. И я чувствую, что только начал катиться массивным валуном на холме просвещения. Тебе яркая сторона – это то, что я медленно приближаюсь и ближе к саммиту.
… и держать свое здравомыслие во время этого процесса.
На прошлой неделе я реализовал «Navbar с динамическим слайдером под« компонентом/функцией в проекте, в настоящее время я работаю »(для клиента компании).
Итак, для целей этого блогового поста я повторно создал этот компонент в изоляции. Я столкнулся с интересной проблемой по пути. Решение этой проблемы требовало некоторое творческое мышление.
Вот как выглядит заполненный компонент.
Компонент Navbar имеет 4 предмета навигации. Нажав на любое из элементов, пользователь перенаправляется на предварительно определенный маршрут (‘/home’, ‘/posts’, ‘/rander’, ‘/speed’)
Основная цель состояла в том, чтобы указать в настоящее время Активный Маршрут, и, следовательно, в текущем элементе Navbar для пользователя (отсюда слайдер).
Другое требование заключалось в том, что ползунок должен был плавно переходить от одного предмета к другому.
Слайдер реализован как дополнительный элемент списка, с некоторым основным стилем:
// navbar.component.css .slider { position: absolute; bottom: -5px; margin-left: 2.2em; border-bottom: 2px solid white; transition: 0.3s; width: 50px; }
Вы можете найти запущенное приложение здесь
Дополнительное требование заключается в том, что слайдер ширина необходимо динамически изменить и соответствовать ширина навигационного пункта над ним.
Изменение ширины товара NAV может произойти в двух сценариях:
- Изменение размера экрана. Пользователь может увидовать его устройство.
- Перевод текстового перевода. Моделируется с помощью кнопки de/ron под компонентом.
Если вы посмотрите на код файла шаблона ниже, вы увидите, что я использовал встроенные стили для динамически установки левой маржи слайдера и ширина:
ActiveTeMwidth а также Актитемлефтмаргин рассчитываются в этом методе:
// navbar.component.ts calcNewIndicatorDOMStyles() { this.activeItemWidth = this.router.isActive(routes.name, false) ? this.navItemDOMProps?.[0].width : this.router.isActive(routes.posts, false) ? this.navItemDOMProps?.[1].width : this.router.isActive(routes.random, false) ? this.navItemDOMProps?.[2].width : this.router.isActive(routes.speed, false) ? this.navItemDOMProps?.[3].width : 0; this.activeItemLeftMargin = this.router.isActive(routes.name, false) ? 0 : this.router.isActive(routes.posts, false) ? this.navItemDOMProps?.[0].width + 30 : this.router.isActive(routes.random, false) ? this.navItemDOMProps?.[0].width + this.navItemDOMProps?.[1].width + 60 : this.router.isActive(routes.speed, false) ? this.navItemDOMProps?.[0].width + this.navItemDOMProps?.[1].width + this.navItemDOMProps?.[2].width + 90 : 0; }
Этот метод срабатывает пользователем, когда нажат элемент NAV. Затем новое положение слайдера (маржинация слева) и ширина должны быть пересчитаны, так что ползунок может переходить под новый активный элемент.
Таким образом, сложная часть была выясна, как получить «самые свежие» стили DOM (после вычисления шаблонов повторной рендеры и новые свойства). Быть более конкретным, мне нужен новый навительный элемент Value Offsetwidth (последний рендер), так что его можно использовать в CALCNEWINDICATOMSTYLES () Способ расчета ползунка ширина и левый край Отказ
Первый шаг получил элементы списка целевого списка из представления DOM. Я использовал ViewShildren Декоратор для этого:
// navbar.component.ts @ViewChildren('navElements') navElements: QueryList;
а также Этот метод для извлечения нового Offsetwidth’s :
// navbar.component.ts private getNewNavItemDOMWidths(navElementsList: any) { this.navItemDOMProps = navElementsList.map(item => ({ width: item.nativeElement.offsetWidth })); }
Наконец, я приехал к причине, по которой я использовал слово «здравомыслие» в заголовке.
Это была самая сложная часть, чтобы выяснить.
Я спросил себя, какой метод жизненного цикла я могу использовать, чтобы получить новейшие, свежечисленные свойства в стиле DOM?
Скорее всего кандидаты были ngafterviewinit () а также ngafterviewchecked () Отказ Все другие методы уволили слишком рано в жизненном цикле Comp.
Но, к моему удивлению, призывая getnewnavitemdomwidths () Метод из любого из этих двух методов не работал. Я все еще получил старые ценности (от предыдущего визуализации).
Так что это:
ngAfterViewInit() { this.getNewNavItemDOMWidths(this.navElements.toArray()); this.calcNewIndicatorDOMStyles(); }
или это:
ngAfterViewChecked() { this.getNewNavItemDOMWidths(this.navElements.toArray()); this.calcNewIndicatorDOMStyles(); }
Само по себе не работал.
Пример.
Скажем, что текущий выбранный язык был EN, и что 4 навигационные элементы имели ширины 10, 20, 30, 40 (я использую случайные числа здесь для целей иллюстрации).
Тогда, если я изменил язык для de, это приведет к тому, что фактические ширины DOM изменяются на 50, 60, 70, 80 – потому что длина текста отличается.
Если я попытался консолью, журнал это в ngafterviewinit () и ngafterviewchecked () Методы Lifecyle, я бы получил 10, 20, 30, 40 (значения от предыдущего визуализации)
Как мне удалось решить эту проблему.
Я сформулировал следующие вопросы:
Это ngafterviewchecked Срок службы жизненного цикла под названием Опять После того, как вычисляются повторные рендеры шаблона и новые свойства в стиле DOM?
Если нет, почему? Как я могу заставить его бежать?
Мое расследование привело меня к выводу, что угловой не запускает этот метод по умолчанию, когда новые свойства стиля DOM вычислены и доступны. Это как-то нужно осознавать или вынуждено, чтобы повторно запустить этот метод, когда новые стили станут доступны.
Итак, я решил это так:
ngAfterViewChecked() { this.getNewNavItemDOMWidths(this.navElements.toArray()); this.calcNewIndicatorDOMStyles(); setTimeout(() => {}, 0); }
Вызов к API браузера Settimeout внутри этого метода усиливает угловую, чтобы повторно запускать его каждый раз, на всякий случай. Потому что обратный вызов Fn внутри Setimeate Может содержать код, который может потенциально повлиять на вид – после того, как он уже был проверен!
И как вы, наверное, уже заметил второе место, в котором this.calcnewindicatormstyles () называется, находится внутри уже упомянутого метода жизненного цикла.
Что интересно в этом решении, состоит в том, что он также охватывает случай, когда «окно» изменяется. Изменение размера просмотра просмотра будет вызвать этот метод жизненного цикла, и новые стили DOM будут вытеснены и использованы для обновления ползунка.
И вот это, более или менее.
Вы можете найти весь исходный код здесь
– Конец этого путешествия
Спасибо за чтение до конца.
Я надеюсь, что вы узнали что-то новое о угловании. Или что указанный мной код поможет вам в будущих проектах.
Говоря о которых у меня возник вопрос о угловых экспертах, которые прочитали весь этот пост.
Что вы думаете о моей реализации? Это хорошо, или это очевидный антипаттерн? Есть ли что-то, что я мог бы сделать лучше? Спасибо
Оригинал: “https://dev.to/ispoljari/one-must-imagine-people-who-work-with-angular-happy-or-how-to-create-a-navbar-with-a-dynamic-slider-and-keep-your-sanity-3la”