Я разрабатываю приложение CRUD.
Для каждого компонента (счет-фактура, счет, поставщик и т. Д.) У меня есть компонент, который отображает список объектов с классическими 3 опциями: просмотр, редактирование, удаление еще классической кнопки «добавить».
Когда я нажимаю на кнопку действия, я открываю модальное. Внутри этого модального у меня есть компонент bean-detail-component с формой, которая отображает детали компонента.
Если я нажал кнопку «просмотр», то модал показывает мне только кнопку «закрыть», если я нажал кнопку «изменить», то модал показывает мне кнопки «применить» и «отменить», если я при нажатии на кнопку «добавить» форма пуста, а на модальной странице представлены кнопки «Добавить» и «Отмена». Модальное название также изменяется в зависимости от контекста.
Поведение модального всегда одинаково (независимо от типа бина, который я модифицирую).
Текущая структура страниц выглядит так:
component1-list.html
- DataTable
- modal start
--<app-component1-detail></app-component1-detail>
- modal end
Это заставляет меня дублировать модальную логику кнопки / заголовка в каждом компоненте.
Можно ли создать компонент, который управляет модальным режимом (одинаковым для всех компонентов) и динамически принимает в качестве параметра тип формы для отображения внутри?
Я подумал вставить в модальный компонент нечто похожее на:
модальной component.html
-modal start
+ *ngif <app-component1-detail></app-component1-detail>
+ *ngif <app-component2-detail></app-component1-detail>
+ *ngif <app-component3-detail></app-component1-detail>
+ *ngif <app-component4-detail></app-component1-detail>
-modal end
Передав параметр модальному компоненту, он может выбирать, какую форму отображать.
Но я также должен ожидать, что в модальных .ts переменная для каждого компонента будет время от времени заполняться в соответствии с потребностями (поскольку поля формы, очевидно, не совпадают).
Это правильный подход? Есть ли лучший подход?