typescript - 从组件打开 ng-bootstrap 模态

Question

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

sample-modal.ts

constructor(private modalService: NgbModal) {}

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

sample-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

Angular 9 版本

模板

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

组件

@ViewChild('myModal') myModal : any;

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