Модальное всплывающее окно не работает в иерархической структуре компонентов angular-bootstrap-md

Question

У меня есть иерархическая структура таких компонентов, как

агент

список задач (компонент: он также использует общий компонент таблицы задач)

тип задачи (компонент)

preview-task (модальный компонент)

agent.component.html (тип задачи, список задач и предварительный просмотр задачи используются в качестве ссылки в этом компоненте)

Общий

task-list-table (в этом компоненте есть кнопка View, которая показывает модальное всплывающее окно при нажатии пользователем)

Это не работает / показывает модальное всплывающее окно, когда я нажимал на кнопку. Я использовал ссылку из этой ссылки для angular-bootstrap-md, т.е. https://mdbootstrap.com/docs/angular/modals/basic/

Answer 1

Вы используете модал в этом сценарии неправильно.Вместо этого используйте динамический модал.Вот ссылка на документацию по реализации и использованию динамического модального режима: https://mdbootstrap.com/docs/angular/modals/basic/#dynamic.

Отметьте этот ответ как принятый, если он работает.

Answer 2

Попробуйте следующий подход:

1) Поместил всплывающий HTML-код вашей модели в агент или родительский компонент.

2) Создайте сервис, который будет публиковать уведомления по нажатию кнопки. Вызывать или генерировать событие при нажатии кнопки таблицы задач или дочернего компонента.

3) Родительский компонент подписывается на службу и обработчик во всплывающей модели открытой модели родительского компонента.