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

Мы собираемся создать файлы, ВЫДЕЛЕННЫЕ Жирным шрифтом ниже, в папке МОДЕЛИ:

.. 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.

‹< Назад = МЕНЮ = Далее ››