Angular 17中Bootstrap 5.3模态框始终显示首次消息问题求助

问题分析 #

模态框首次显示正常，但后续提交数据时始终展示第一次的消息，核心原因是每次调用showModal都创建新的Bootstrap Modal实例，旧实例的DOM绑定未完全清理，导致Angular双向绑定无法同步最新的消息内容；同时原代码中在模态框隐藏时销毁实例，进一步加剧了实例复用的问题。

修复方案 #

1. 复用同一个Bootstrap Modal实例，避免重复创建
2. 统一绑定模态框隐藏事件，仅绑定一次
3. 组件销毁时清理模态框实例，防止内存泄漏

修改后的TS组件代码 #

import { Component, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { UserService } from '../../services/user/user.service';
import { iUserDTO } from '../../models/iUserDTO';
import * as bootstrap from 'bootstrap';

@Component({
  selector: 'app-users-add',
  templateUrl: './users-add.component.html',
  styleUrls: ['./users-add.component.css']
})
export class UsersAddComponent implements OnDestroy {
  myForm: FormGroup;
  modalMessage: string = '';
  modalHeader: string = '';
  identificationNumber = 0;
  names = '';
  surnames = '';
  isUserMaster = '';
  // 复用模态框实例
  private modalInstance?: bootstrap.Modal;

  constructor(
    private fb: FormBuilder,
    private userService: UserService,    
    private route: ActivatedRoute,
    private router: Router
  ) {
    this.myForm = this.fb.group({
      identificationNumber: ['', [Validators.required, Validators.pattern('^[0-9]+$'), Validators.maxLength(25)]],
      firstName: ['', [Validators.required, Validators.pattern('^[a-zA-Z ]+$'), Validators.maxLength(100)]],
      lastName: ['', [Validators.required, Validators.maxLength(100)]],
      userMaster: ['no', Validators.required]
    });
  }

  private showModal(message: string, header: string): void {
    this.modalMessage = message;    
    this.modalHeader = header;
    const modalElement = document.getElementById('errorModal');
    
    if (modalElement) {
      // 仅在首次调用时创建实例并绑定事件
      if (!this.modalInstance) {
        this.modalInstance = new bootstrap.Modal(modalElement);
        // 绑定一次隐藏事件
        modalElement.addEventListener('hidden.bs.modal', () => {                
          if(this.modalHeader === 'Éxito'){
            this.resetForm();
          }
        });
      }
      // 显示最新内容的模态框
      this.modalInstance.show();
    } else {
      console.error('未找到id为"errorModal"的模态框元素');
    }    
  } 

  private resetForm(): void {
    const userMasterValue = this.myForm.get('userMaster')?.value;
    this.myForm.reset({
      identificationNumber: '',
      firstName: '',
      lastName: '',
      userMaster: userMasterValue
    });    
  }

  onSubmit() {
    if (this.myForm.valid) {      
      const user: iUserDTO = {
        IdUser: 0,
        IdentificationNumber: this.myForm.value.identificationNumber,
        Names: this.myForm.value.firstName,
        Surnames: this.myForm.value.lastName,
        UserMaster: this.myForm.value.userMaster === 'yes'
      };

      this.userService.saveData(user).subscribe(
        response => {          
          this.showModal(response.message, 'Éxito');
        },
        error => {
          const errorMessage = error.error?.message || 'Error desconocido';
          this.showModal(errorMessage, 'Error');
        }
      );
    } else {
      this.showModal('Formulario inválido', 'Error');
    }
  }

  // 组件销毁时清理模态框实例
  ngOnDestroy(): void {
    this.modalInstance?.dispose();
  }
}

关键修改点说明 #

• 新增modalInstance属性存储模态框实例，实现复用
• 仅在首次调用showModal时创建实例并绑定hidden.bs.modal事件，避免重复绑定
• 移除原代码中modal.dispose()调用，改为在组件销毁时统一清理
• 确保每次显示模态框前已更新modalMessage和modalHeader，Angular双向绑定会自动同步到DOM

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