Angular中代码调用ng-bootstrap模态框无法正常显示问题求助

问题核心是调用demobutton时传入的参数类型错误：

• 按钮点击时传入的是模板引用变量UploadModal（对应DOM中的模态框模板元素）
• 但open函数里传入的是字符串'UploadModal'，modalService.open无法识别字符串作为模态框内容，导致显示异常。

修复步骤： #

1. 在组件类中通过@ViewChild获取模态框模板的引用：

import { Component, ViewChild, TemplateRef } from '@angular/core';
import { NgbModal, ModalDismissReasons } from "@ng-bootstrap/ng-bootstrap";

@Component({
  // 你的组件元数据
})
export class YourComponent {
  @ViewChild('UploadModal') uploadModal!: TemplateRef<any>;

  constructor(private modalService: NgbModal) {}

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

  async open(files){
    this.modalService.dismissAll();
    setTimeout(() => {
      // 传入获取到的模板引用，而非字符串
      this.demobutton(this.uploadModal); 
    }, 2000); 
  }
}

2. 确保模板中的模态框模板带有正确的引用标记：

<ng-template #UploadModal>
  <!-- 你的模态框内容 -->
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">上传文件</h4>
  </div>
  <div class="modal-body">
    <!-- 模态框内容区域 -->
  </div>
</ng-template>

额外优化建议： #

可以用await替代嵌套的setTimeout，让async函数逻辑更清晰：

async open(files){
  this.modalService.dismissAll();
  await new Promise(resolve => setTimeout(resolve, 2000));
  this.demobutton(this.uploadModal); 
}

内容的提问来源于stack exchange，提问作者user3653474