Angular中手动关闭Bootstrap模态框问题求助

看起来你遇到的核心问题是混用了原生Bootstrap模态框和Angular Bootstrap的NgbActiveModal服务——原生Bootstrap依赖jQuery控制模态框，而Angular Bootstrap是纯Angular实现，完全不需要jQuery，两者的控制逻辑互不兼容，导致你调用activeModal.close()根本无法影响到jQuery管理的原生模态框。

下面是一步步的修复方案：

1. 移除冲突的依赖 #

首先删掉index.html里的原生Bootstrap JS和jQuery引用，Angular Bootstrap已经内置了Bootstrap的样式和交互逻辑，这些外部引用只会导致冲突：

修改后的index.html：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>YoavOnlineShop</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
  <!-- 移除jQuery和原生Bootstrap JS脚本 -->
</body>
</html>

2. 改用Angular Bootstrap的模态框结构 #

把register.component.html里的原生模态框标记（比如modal fade、data-toggle）全部替换成Angular Bootstrap的组件结构，让模态框由Angular Bootstrap服务管理：

修改后的register.component.html：

<div class="modal-header">
  <h5 class="modal-title">Sign Up!</h5>
  <button type="button" class="close" (click)="activeModal.dismiss('Cross click')" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <form [formGroup]="newUser" (ngSubmit)='onSubmit()' *ngIf="!verification">
    <label>ID</label>
    <br>
    <input type="text" placeholder="Please Enter Your ID" formControlName="Tz">
    <br>
    <label>Email</label>
    <br>
    <input type="email" placeholder="Please Enter Your Email" formControlName="Email">
    <br>
    <label>Password</label>
    <br>
    <input type="text" name="password" placeholder="Please Choose A Password" formControlName="PW" size="25">
    <br>
    <label>Resubmit Your Password</label>
    <br>
    <input type="text" name="confirmPassword" placeholder="Please Resubmit Your Password" formControlName="PWVerification" validateEqual="password" size="30">
    <br>
    <input type="submit" class="btn btn-success" [disabled]="!newUser.valid">
    <br>
    <span *ngIf="newUser.get('Email').invalid &&!newUser.get('Email').pristine">Your email does not look right</span>
    <br>
    <span *ngIf="newUser.get('Tz').errors?.maxlength ||newUser.get('Tz').errors?.minlength ">Your ID must contain 9 digits</span>
    <br>
    <span *ngIf="newUser.get('PW').invalid&&!newUser.get('PW').pristine">Password must include at least one letter and one digit</span>
    <br>
    <span *ngIf="newUser.get('PWVerification').errors?.matchOther">Your submitted passwords don't match</span>
    <br>
    <span *ngIf="newUser.get('Tz').errors?.exists">This ID already exists</span>
  </form>
  <form [formGroup]="newUser2" *ngIf="verification" (ngSubmit)="onSubmit2()">
    <label>City</label>
    <br>
    <input list="City" name="City" formControlName="City" placeholder="Choose City">
    <datalist id="City">
      <option value="Jerusalem">
      <option value="Tel Aviv">
      <option value="Haifa">
      <option value="Rishon LeZion">
      <option value="Petach Tikva">
      <option value="Ashdod">
      <option value="Netanya">
      <option value="Be'er Sheva">
      <option value="Holon">
      <option value="Bnei Brak">
    </datalist>
    <br>
    <label>Street</label>
    <br>
    <input type="text" placeholder="Please Input Street for Delivery" formControlName="Street">
    <br>
    <label>First Name</label>
    <br>
    <input type="text" placeholder="First Name here" formControlName="FirstName">
    <br>
    <label>Last Name</label>
    <br>
    <input type="text" placeholder="Last Name here" formControlName="LastName">
    <br>
    <input type="submit" class="btn btn-success" [disabled]="!newUser2.valid">
  </form>
</div>
<div class="modal-footer">
</div>

3. 通过Angular Bootstrap服务打开模态框 #

你需要在父组件（比如app.component.ts）里用NgbModal服务来打开注册模态框，而不是手动触发原生模态框：

示例app.component.ts代码：

import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { RegisterComponent } from './register/register.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private modalService: NgbModal) {}

  openRegisterModal() {
    const modalRef = this.modalService.open(RegisterComponent);
    // 可选：订阅模态框关闭事件，接收返回数据
    modalRef.closed.subscribe(result => {
      console.log('模态框已关闭:', result);
    });
  }
}

对应的app.component.html添加打开按钮：

<button class="btn btn-primary" (click)="openRegisterModal()">打开注册模态框</button>

4. 确认注册组件逻辑正常 #

你的register.component.ts里的onSubmit2方法逻辑是正确的，只要模态框是通过Angular Bootstrap的NgbModal服务打开的，activeModal.close()就会正常生效。另外可以把*ngIf="verification!=true"简化成*ngIf="!verification"，让代码更简洁。

问题根源总结 #

原生Bootstrap模态框是通过jQuery操作DOM来控制显示/隐藏的，而NgbActiveModal是Angular Bootstrap提供的服务，只能关联由NgbModal创建的模态框实例。你之前混用两种模态框实现，导致activeModal根本无法关联到jQuery管理的模态框，所以调用close()没有任何效果。

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