На этой неделе я научился создавать порталы в Angular.
Проблема
Такие фреймворки, как Angular, Reactjs и Emberjs, позволяют разработчикам интерфейса легко писать чистый, повторно используемый и поддерживаемый код. Они достигают такой возможности повторного использования, предоставляя API для инкапсуляции аналогичных функций в компоненты.
Компонент - это соединение / комбинация пользовательского интерфейса (UI) и управляющей логики, которая оживляет пользовательский интерфейс.
Эта связь означает, что все элементы действий должны будут располагаться близко друг к другу, что затрудняет удовлетворение всех потребностей пользователя.
Например, вы хотите разрешить клиенту подать заявку на страхование после того, как он заполнил необходимую информацию.
- Когда пользователь открывает сайт, вы показываете ему объяснение того, что вы продаете, и кнопку «Получить расценки», чтобы отправить его в раздел продуктов.
- После того, как он / она предоставит необходимую информацию, появится кнопка «Подать заявку сейчас».
- Теперь, если он / она решит вернуться в раздел информации, им будет удобно увидеть кнопку «Применить сейчас» вместо кнопки «Получить предложение». .
Иллюстрация
Решение
Чтобы реализовать этот представленный случай (пример выше), нам нужен способ нарушить инкапсуляцию компонента (или, по сути, объявить часть пользовательского интерфейса в одном компоненте, а затем отобразить это в другом компоненте).
К счастью, эти фреймворки предоставляют разработчикам инструменты для этого, и сегодня я покажу вам, как использовать инструменты, предоставляемые Angular, чтобы помочь нашим пользователям не забывать сохранять свой прогресс.
Reactjs предоставляет встроенный API для порталов и есть сторонняя библиотека для Emberjs
Выполнение
Заявление об ограничении ответственности: приведенный ниже код является неполным и предназначен только для демонстрации.
- Подготовьте контейнер, в котором будет отображаться перенесенный интерфейс.
- Поместите пользовательский интерфейс внутрь компонента-владельца и оберните его внутри «портала».
- Создайте портал и предоставьте ему доступ к контейнеру.
- Теперь, если вы откроете свое приложение, пользовательский интерфейс должен появиться в контейнере, и любое действие, которое вы предпримете, должно выполняться компонентом-владельцем.
Вывод
Концепция портала позволяет разработчикам удовлетворять требованиям UX без нарушения механизма инкапсуляции Framework.
