Можно ли иметь модал во вкладке и скрывать при выборе другой вкладки?

Question

Мое приложение использует отображение вкладок для отображения разных записей.На каждой вкладке у нас есть действия (кнопки), которые могут открыть модальное окно для отображения более подробной информации и возможности редактирования.Прежде всего, дочерняя запись в основных / дочерних отношениях (например, адрес записи контакта).

Мы бы хотели, чтобы "модальный" находился во вкладке, чтобы пользователь мог переключаться между вкладками, пока модальныйПоказано;и скрыт, когда другая вкладка выбрана / активна.Модал будет отображаться повторно, когда пользователь вернется на вкладку.

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

Мы используем угловой 8.0, если это имеет какое-то значение.

Спасибо, Крис ...

Answer 1

Если он должен быть внутри вкладки, почему бы не реализовать его как обычный компонент, который появляется в событии нажатия кнопки? Вы можете создать наложение с помощью простого гибкого контейнера с абсолютным позиционированием, которое охватывает тело вкладки и выравнивает модальный компонент по центру вкладки. Вы можете управлять им с помощью ngIf или с помощью css, если вы хотите, чтобы он все время отображался в фоновом режиме.

Поскольку этот оверлей / компонент является частью вкладки, он может отображаться только при открытии определенной вкладки.

Если у вас есть несколько различных модальных загрузок, вы можете решить это с помощью ngSwitch или динамической загрузки модального компонента.