模式未以角度以编程方式正确打开答案

【问题标题】：Modal not opened properly programmatically in angular模式未以角度以编程方式正确打开
【发布时间】：2022-11-29 19:51:46
【问题描述】：

我正在使用ng-bootstrap模态

从“@ng-bootstrap/ng-bootstrap”导入{NgbModal，ModalDismissReasons}；

在按钮上单击它被正确打开

<button class="btn labelbtn accountbtn customnavbtn"(click)="demobutton(UploadModal)" type="button">   Open   </button> 


demobutton(UploadModal:any) {
   
    this.modalService
      .open(UploadModal, {
        windowClass: "modal",
        ariaLabelledBy: "modal-basic-title",
        backdrop: false,
      })
      .result.then(
        (result) => {},
        (reason) => {}
      );
   
  }

但是当我尝试通过功能打开时，它没有正确打开，只有一些 div 可见，内容不可见。

async open(files){
      this.modalService.dismissAll();
      setTimeout(() => {
        this.demobutton('UploadModal'); 
      }, 2000);

任何解决方案谢谢

【问题讨论】：

标签： angular typescript ng-bootstrap ng-bootstrap-modal

【解决方案1】：

尝试这个：

function timeout(ms) {
     return new Promise(resolve => setTimeout(() => 
     {this.demobutton('UploadModal');}, ms));
}

async open(files){
     this.modalService.dismissAll();
     await timeout(2000);
}

【讨论】：

【解决方案2】：

看到当你有一个按钮时（我想你打开了一个模板）你写：demobutton(UploadModal)。 “UploadModal”是一个“模板”，而不是一个字符串。请参阅 docs：“内容可以作为 TemplateRef 或组件类型提供。”

所以你需要使用 ViewChild “获取”模板

@ViewChild('UploadModal') modal:TemplateRef<any>

//and use, see that you open "this.modal"
this.modalService
      .open(this.modal, {
        windowClass: "modal",
        ariaLabelledBy: "modal-basic-title",
        backdrop: false,
      });

更新演示：stackblitz

【讨论】：