Откройте мод ng-bootstrap от Compontent

Question

У меня есть компонент angular5, который должен запускать модель начальной загрузки. Это хорошо работает с помощью кнопки, но нет четкой документации API о том, как программно открыть модальный ng-bootstrap (bootstrap 4) внутри компонента.

образец-modal.ts

constructor(private modalService: NgbModal) {}

open(content){
 this.modalService.open(content);
}

образец-modal.html

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
  </div>
</ng-template>

Answer 1

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

https://ng -bootstrap.github.io / # / компоненты / модальные / примеры

Answer 2

Вам нужно сделать это.

  @ViewChild('content') content : any;
  modalRef: BsModalRef;

  private modalConfig: ModalOptions = {
    backdrop: 'static',
    keyboard: true,
    class: 'modal-md',
  };

  show() {
    this.modalRef = this.modalService.show(this.content, this.modalConfig);
  }

  hide() {
    this.modalRef.hide();
  }

даже вы можете сделать его отдельным компонентом для повторного использования и использовать ng-content для передачи модального содержимого этому компоненту