Angular - Как вызвать модальное в компоненте из другого компонента? - PullRequest
Новая
       5

Angular - Как вызвать модальное в компоненте из другого компонента?

0 голосов
/ 23 марта 2020

Я пытаюсь вызвать модал (созданный с помощью Md bootstrap) в компоненте из другого компонента, но я борюсь, как это сделать в Angular. Хорошо, это код модального окна: [editComponent.html]: 

<div mdbModal #basicModal="mdbModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
          <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close" (click)="basicModal.hide()" mdbWavesEffect>Close</button>
        <button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>Save changes</button>
      </div>
    </div>
  </div>
</div>

И есть еще один компонент под названием [ProduitComponent. html], в котором есть кнопка (Edit), как только я нажимаю на кнопка Модал должна появиться на той же странице.

Спасибо!

1 Ответ

1 голос
/ 23 марта 2020

Вы можете сделать это sh только несколькими способами. Если вы пытаетесь выполнить код внутри компонента из другого компонента, вы должны получить ссылку на указанный компонент. Затем вы можете получить доступ к свойствам / методам publi c с помощью ComponentRef<Component>.instance.

. Я бы порекомендовал переместить ваш диалог (модальный) в DialogService, чтобы вы могли легко вызывать любую диалоговую форму. компонент, который вы будете sh. Поскольку mdbootstrap не поставляется с предварительно упакованным из коробки диалоговым окном, вам, вероятно, придется создать BootStrapModalComponent, и в вашем сервисе вставить диалоговое окно динамически, используя ComponentFactory

Пример : 

const componentFactory = ComponentFactoryResolver.resolveComponentFactory(MyBootstrapModalComponent);
ViewContainerRef.createComponent(componentFactory);

Тогда в вашей службе у вас будет logi c для запуска процесса создания компонента, когда они вызывают dialogOpen или что-то в этом роде. Когда они вызывают dialogClose, вы запускаете аналогичную логику c, которая разрушает диалоговое окно.

IMO, способ, которым команда Angular Material сделала MatDialog / MatDialog `, намного чище. Они предоставляют CDK, который вы могли бы использовать, чтобы сделать свои bootstrap модалы более универсальными c.

Другой вариант - выбрать маршрут для бедняков и создать DialogService, который просто имеет EventEmitter. Этот EventEmitter может быть одноэлементным сервисом, который совместно используется компонентами для передачи ваших событий открытия / закрытия между любыми компонентами. Хотя это будет работать без проблем, это не так элегантно.

...