Question

我有一个angular5组件应该触发一个bootstrap模型打开。它使用按钮很好，但没有明确的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

你需要这样做。

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

Answer 2

您需要创建一个单独的模态组件并将其添加到条目组件中，以便它以这种方式工作。

https://ng-bootstrap.github.io/#/components/modal/examples

Answer 3

Angular 9版本

模板

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

组件

@ViewChild('myModal') myModal : any;

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

从Compontent打开ng-bootstrap模态

3 个答案: