如何用Angular关闭Bootstrap 5模态框？调用dismiss时遇undefined错误

问题根源 #

核心原因是函数上下文丢失：在onSubmit方法中，直接将closeSpinnerModal传入subscribe时，函数内部的this不再指向组件实例，导致this.modalReference为undefined，调用dismiss()自然触发错误。

解决方案 #

以下三种方法任选其一即可修复：

方法1：用箭头函数绑定上下文

修改onSubmit中的订阅逻辑，通过箭头函数保留组件上下文：

public onSubmit(event : MouseEvent) {
  this.loading = true; // 注意：原代码里的isLoading未定义，统一为loading
  this.open(this.content);
  timer(this.spinnerDuration).subscribe(() => this.closeSpinnerModal());
}

方法2：在构造函数中绑定this

在组件构造函数里提前绑定方法的上下文，确保无论何时调用，this都指向组件实例：

constructor(
  private cdRef: ChangeDetectorRef,
  private modalService: NgbModal,
){
  this.closeSpinnerModal = this.closeSpinnerModal.bind(this);
}

方法3：将方法定义为箭头函数

直接把closeSpinnerModal写成箭头函数，从根源避免上下文丢失，同时加上可选链操作符防止未初始化的情况：

public closeSpinnerModal = () => {
  this.modalReference?.dismiss(); 
}

额外优化建议 #

1. 给ViewChild添加类型声明，避免类型模糊：

import { TemplateRef } from '@angular/core';

@ViewChild("spinnerLoaderModal") content: TemplateRef<any>;

2. 统一变量名：原代码中onSubmit里的this.isLoading未在组件中定义，应改为this.loading = true;。

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