Интерфейс Angular 2 Master-Detail

Интерфейс Master-Detail - это очень распространенная часть пользовательского интерфейса в наши дни. В этой статье мы увидим, как создать такой интерфейс. Мы будем использовать множество инструментов, поставляемых с Angular 2: маршрутизация, отложенная загрузка, охранники, резолверы, реактивные формы. Исходный код, описанный в этой статье, доступен в проекте github feloy / ng2-master-detail, а теги git размещены на каждой важной вехе, указанной в статье. Живые демонстрации доступны для каждого этапа:

- исходный проект angular-cli
- интерфейс материала
- пустой модуль
- маршруты на месте
- резолверы на месте
- данные отображаются
- редакция

Первоначальный проект

Мы начинаем с нового проекта angular-cli (см. Git tag ’step0 ').

Затем мы создаем простой макет страницы с боковой навигацией, панелью инструментов и рабочей зоной. Благодаря материалу это можно сделать за пару минут (см. Тег git «step1-material»).

Маршрутизация

Если вы посмотрите на пункт меню в этом интерфейсе, вы догадаетесь, что мы создадим интерфейс «мастер-деталь» для перечисления и просмотра деталей драконов. Давайте определим различные состояния нашего желаемого приложения и связанных маршрутов.

Во-первых, когда мы щелкаем по пункту меню, мы хотим получить интерфейс со списком драконов. Переход к этому состоянию приложения будет осуществляться с помощью URL-адреса «/ dragons».

Затем, щелкнув дракона в списке, мы хотим получить подробную информацию о конкретном драконе и иметь возможность редактировать эти данные. В этом состоянии мы также хотим, чтобы список всех драконов оставался видимым, чтобы вы могли быстро перейти к другому дракону. URL-адресом для перехода в это состояние будет ‘/ dragons / : id’, где ‘: id’ - идентификатор дракона.

В конце концов, нам нужен интерфейс, в котором мы можем добавить нового дракона. Мы по-прежнему хотим просмотреть список драконов в этом состоянии, чтобы не создавать дракона дважды. Это состояние будет перемещено по URL-адресу «/ dragons / new».

Подводя итог, мы хотим определить следующие три маршрута:

‘/ Dragons’, чтобы перечислить всех драконов,
‘/ Dragons /: id’ для просмотра и редактирования деталей дракона, по-прежнему перечисляя всех драконов,
‘/ Dragons / new’, отображающая форму для добавления нового дракона, все еще перечисляя всех драконов.

Для этих состояний мы создадим три компонента: первым будет «Компонент центра драконов», который будет содержать два других: «Компонент списка драконов» и «Компонент деталей дракона».

Компонент Center необходимо установить, как только URL-адрес начинается с «/ dragons». Компонент списка всегда должен отображаться в этом центральном компоненте, а компонент сведений будет отображаться, как только URL-адрес будет завершен с помощью «: id» или «новый».

Мы создадим модуль, содержащий эти три компонента и конфигурацию маршрутизатора, относящуюся к этим состояниям, чтобы вы могли извлечь выгоду из ленивой загрузки, обеспечиваемой маршрутизатором.

Создайте модуль и загрузите его лениво

В шаблоне приложения мы добавляем ссылку маршрутизатора к привязке для перехода к «/ dragons» при щелчке по пункту меню,
в шаблоне приложения мы также добавляем выход маршрутизатора, в который будет встроен компонент, созданный маршрутизатором,
мы создаем конфигурацию для маршрутизатора с двумя возможными маршрутами: 1. пустой маршрут, который будет представлять состояние «Home» и отображать простой компонент Home на выходе маршрутизатора, 2. маршрут '/ dragons', который загрузит модуль Dragons .
мы создаем модуль Dragons, пока пустой.

На этом этапе (git tag 'step2-empty-dragons-module') вы можете перейти к '/ dragons', щелкнув пункт меню, и увидеть, что ваш браузер загружает файл '0.chunk.js ' файл. Ленивая загрузка работает!

Создавайте разные маршруты в модуле Dragons

Мы заставляем компонент Home отображать некоторую приветственную информацию,
мы добавляем компонент Dragons Center, экземпляр которого создается каждый раз, когда мы переходим к URL-адресу «/ dragons» или дополнительному URL-адресу,
мы добавляем два маршрутизатора в компонент Dragons Center, основной для компонента Dragons List и «детали», названные одним для компонента Dragons Details.
мы пишем конфигурацию маршрутизатора для создания экземпляров этих компонентов при необходимости,
мы реализуем пустой компонент «Список драконов» и компонент «Сведения о драконах».

На этом этапе (git tag ‘step3-dragons-routes’) мы видим, что три наших состояния работают:

введите http: // localhost: 4200 / dragons на панели навигации браузера или щелкните «Thirsty Dragons» в боковой навигации: должен отобразиться Центр драконов, а компонент «Список драконов» отобразит его образцы данных.
введите http: // localhost: 4200 / dragons / new на панели навигации (мы до сих пор не создали routerLinks для доступа к этому URL-адресу из приложения): вы должны увидеть компонент Details и компонент List, отображаемые внутри центра Составная часть.
введите http: // localhost: 4200 / dragons / 1, и вы увидите то же самое, что и раньше.

Разрешить и отобразить данные

Следующим шагом является настройка преобразователей, которые будут загружать данные перед созданием различных компонентов. Компоненту Center не нужны данные. Это всего лишь заполнитель, куда помещаются список и детали. Напротив, компонент List должен знать список драконов, а компонент Details должен знать детали конкретного дракона при использовании с идентификатором (ему не нужны какие-либо данные при создании экземпляра с «новым»).

Для этого мы создадим два преобразователя в модуле Dragon: DragonsListResolve и DragonsDetailsResolve, и укажем маршрутизатору использовать эти преобразователи при необходимости.

Мы начинаем с двух преобразователей, которые не возвращают данные, а регистрируют информацию в консоли, поэтому мы можем проверить, что они вызываются, когда мы загружаем соответствующие компоненты (см. Тег git «step4-resolvers-silent»).

Следующим шагом будет создание службы драконов, которая вернет список драконов и информацию о конкретном драконе. Затем этот сервис будет использоваться резолверами. После этого компоненты List и Details могут получать данные от своих преобразователей и отображать информацию.

На этом этапе (git tag ‘step5-data-display’) мы получаем интерфейс master-detail, доступный только для чтения. Список драконов отображается, и когда вы нажимаете на дракона из списка, отображаются подробности, и выбранный дракон выделяется в списке.

Редактирование данных

Еще предстоит проделать некоторую работу по редактированию данных: создать форму для редактирования информации о драконах или создать новую, а также использовать охранник CanDeactivate для контроля возможности выхода из редакции формы.

Для этого мы используем реактивную форму с одним элементом управления, именем и некоторыми кнопками для отмены редактирования, сброса формы, удаления дракона и сохранения или добавления отредактированного дракона.

В конфигурации маршрутизатора мы определяем службу canDeactivate, которая будет отвечать за то, чтобы сообщить маршрутизатору, может ли пользователь покинуть форму без потери данных. А именно, маршрутизатор вызовет метод canDeactivate этой службы, передав ему компонент, который пользователь хочет деактивировать. Здесь мы создаем общий сервис CanDeactivate, который будет вызывать метод canDeactivate самого компонента.

При сохранении или добавлении дракона мы хотим вернуться к списку и выделить только что отредактированного или созданного дракона. Для этого мы переходим к URL-адресу '/ dragons', передавая параметр матрицы с синтаксисом навигации (['драконы', {editid: this.id}]), который будет переходить к URL-адресу, например '/ dragons; editid = 1 '. В компоненте List wa может получить это значение editid из атрибута params маршрутизатора.