Bootstrap模态框点击按钮后URL重复变化问题求助

首先，咱们先理清楚你遇到的两个核心问题：

1. 最初把添加按钮和Bootstrap模态框放在同一组件里时出现报错（你拆分组件解决了，但根源其实是Angular和jQuery/Bootstrap的DOM操作冲突）
2. 拆分组件后，点击按钮打开模态框时URL出现重复变化（比如/package#exampleModal反复叠加成/package#exampleModal#exampleModal）

为什么会出现URL重复变化？ #

• 你同时在按钮上用了Bootstrap原生的data-toggle="modal"属性，又通过jQuery代码$("#exampleModal").modal("show")手动触发模态框，这等于两次触发模态框的显示逻辑，导致URL的hash值被重复添加。
• Bootstrap模态框默认会把模态框的ID作为hash追加到URL里，而Angular默认是hash模式路由，两者的hash机制撞在一起，就会出现重复叠加的情况。

一步步解决问题 #

第一步：移除重复的触发逻辑 #

先把按钮上的data-toggle="modal"和data-target="#exampleModal"删掉，同时去掉jQuery里重复的触发代码，避免双重触发：

修改后的按钮代码：

<button class="btnAddPackage rainbow-text" id="myBtn">
  <i class="fa fa-plus"></i> New Package
</button>

第二步：用Angular的方式控制模态框（别再混用jQuery了） #

在Angular里，尽量别直接用jQuery操作DOM，咱们用Angular的ViewChild来获取模态框，再结合Bootstrap的API控制，这样更符合Angular的组件化逻辑：

2.1 在组件类里添加模态框引用

打开你的PackageComponent，添加以下代码：

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
declare var $: any; // 如果你已经在angular.json里引入了jQuery，就加这个声明

@Component({
  selector: 'app-package',
  templateUrl: './package.component.html',
  styleUrls: ['./package.component.css']
})
export class PackageComponent implements OnInit {
  @ViewChild('exampleModal') exampleModal!: ElementRef;
  formTest = { name: '', price: '', count: '', createAt: '' };

  constructor() { }

  ngOnInit(): void {
  }

  // 打开模态框的方法
  openModal() {
    $(this.exampleModal.nativeElement).modal('show');
  }

  // 关闭模态框的方法
  closeModal() {
    $(this.exampleModal.nativeElement).modal('hide');
  }

  // 提交表单的方法
  create() {
    // 这里写你的数据插入逻辑
    console.log('要提交的数据:', this.formTest);
    // 提交后关闭模态框
    this.closeModal();
  }
}

2.2 修改模态框的HTML代码

把模态框的ID换成Angular的模板引用变量#exampleModal，同时把关闭按钮的onclick改成Angular的事件绑定，表单提交也用组件里的方法：

<div class="modal fade" #exampleModal tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" data-backdrop="false" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="closeModal()" aria-label="Close" aria-hidden="true">X</button>
        <p class="modal-title" id="exampleModalLabel">Add Package</p>
      </div>
      <div class="modal-body">
        <form (ngSubmit)="create()">
          <div class="form-group">
            <!-- 注意：这里去掉了重复的id，ID必须唯一！ -->
            <input type="text" class="form-control" [(ngModel)]="formTest.name" name="name" placeholder="Package Name">
          </div>
          <div class="form-group">
            <input type="text" class="form-control" [(ngModel)]="formTest.price" name="price" placeholder="Price">
          </div>
          <div class="form-group">
            <input type="text" class="form-control" [(ngModel)]="formTest.count" name="count" placeholder="Points">
          </div>
          <div class="form-group">
            <input type="text" class="form-control" [(ngModel)]="formTest.createAt" name="createAt" placeholder="Number Of Month">
          </div>
          <button type="submit" class="btnAddPackage2">Add</button>
        </form>
      </div>
    </div>
  </div>
</div>

2.3 给按钮绑定Angular的点击事件

把按钮的点击事件绑定到组件里的openModal方法：

<button class="btnAddPackage rainbow-text" (click)="openModal()">
  <i class="fa fa-plus"></i> New Package
</button>

第三步：彻底禁用Bootstrap模态框的URL hash变化 #

如果做完前两步还是有URL变化的问题，咱们可以在初始化模态框时直接禁用hash更新：

openModal() {
  $(this.exampleModal.nativeElement).modal({
    show: true,
    backdrop: false,
    hash: false // 关键：禁用hash添加到URL
  });
}

额外提醒 #

• 你原来的表单里多个input用了同一个id="recipient-name"，这是不符合HTML规范的，ID必须唯一，所以我已经帮你去掉了重复的ID。
• 确保你已经在angular.json里正确引入了Bootstrap的CSS和JS，还有jQuery：

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

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