从组件中打开 ng-bootstrap Modal

Question

我有一个 angular5 组件，应该触发引导模型打开。它使用按钮运行良好，但没有关于如何在组件内以编程方式打开 ng-bootstrap modal (bootstrap 4) 的明确 api 文档。

样本模态.ts

constructor(private modalService: NgbModal) {}

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

样本模态.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

Angular 9 版本

模板

<ng-template #myModal let-modal>
    <h1>My Modal</h1>
</ng-template>

成分

@ViewChild('myModal') myModal : any;

openModal() {
    this.modalService.open(this.myModal);
}

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 将模态内容传递给该组件