Модели, которые мы собираемся создать здесь, предназначены для того, чтобы компонент оставался организованным, а также для большей поддержки компонента диалога.
Мы собираемся создать файлы, ВЫДЕЛЕННЫЕ Жирным шрифтом ниже, в папке МОДЕЛИ:
.. src
.. .. приложение
.. .. .. компоненты
.. .. .. ..модели
.. .. ... . .. dialog-active.model.ts
.. .. .. .. dialog-content-ref.model.ts
.. .. .. .. Параметры диалога .model.ts
.. .. .. .. .. dialog-ref.model.ts
.. .. .. .. .. index.ts
.. .. .. app.component.html
.. .. app.component.scss
.. .. ..app.component.ts
.. ... .app.module.ts
Ниже в каждом фрагменте указан полный путь, по которому должен быть создан файл
Заглянем в каждый из этих файлов :)
Параметры диалогового окна
DialogOptionsModel позволяют нам расширять свойства, которые могут сделать диалоговое окно очень гибким, например:
- backdrop: включать фон под диалоговое окно
- closeOutsideClick: позволяет пользователю щелкнуть в любом месте, кроме диалогового окна, чтобы закрыть его.
- вверху: расположение диалогового окна в верхней части экрана
- данные: какие данные мы отправим в модальный, чтобы его можно было настроить
Обратите внимание, что это общий класс, где T будет типом свойства данных, которое будет совместно использоваться в теле компонента.
Активный диалог
DialogActiveModel отвечает за события в диалоговом окне. В этом примере у нас есть следующее:
- закрыть: когда пользователь нажимает кнопку закрытия, и диалоговое окно может быть настроено с некоторыми данными для отправки в метод
- отклонить: когда пользователь щелкает в стороне диалогового окна, если это разрешено параметрами выше.
Ссылка на содержание диалогового окна
DialogContentRefModel относится к самому модальному компоненту. Он будет использоваться для вставки в HTML.
Ссылка на диалоговое окно
DialogRefModel будет отвечать за обработку поведения в справочнике диалогового окна. Пояснения в коде в виде комментария:
Модели
В TypeScript мне нравится создавать индексный файл, поэтому он поможет импортировать модули.
Например, вместо этого:
импортировать {DialogActiveModel} из '../components/models/dialog-active.model.ts';
импортировать {DialogOptionsModel} из '../components/models/dialog -options.model.ts ';
Я могу сделать это:
импортировать {DialogActiveModel, DialogOptionsModel} из «../components/models»;
Лучше, эй ?! :)
Итак, это модели, которые будут поддерживать наш компонент. Итак, давайте теперь создадим DialogComponent.