typescript 在Angular 模式下，未通过编程正确打开模态

jogvjijk 于 2022-11-30 发布在 TypeScript

关注(0)|答案(2)|浏览(125)

我使用的是ng-bootstrap模式
从“@ng-bootstrap/ng-bootstrap”中导入{ NgbModal，模态解雇原因};
点击按钮时，其正确打开

<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);

任何解决方案谢谢

typescript

来源：https://stackoverflow.com/questions/74610117/modal-not-opened-properly-programmatically-in-angular

2条答案

按热度按时间

tp5buhyn1#

试试这个：

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

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

赞(0）回复(0）举报 2022-11-30

yhuiod9q2#

看到当你有一个按钮（我想象你打开一个模板）你写：demobutton(UploadModal)。“UploadModal”是一个“模板”，而不是字符串。请参阅文档：“内容可作为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

赞(0）回复(0）举报 2022-11-30

我来回答

typescript 在Angular 模式下，未通过编程正确打开模态

2条答案

相关问题

热门标签

最新问答