模式成功重定向到搜索后，页面上仍保留覆盖层

Question

我正在尝试使用模式作为提示，提示用户输入搜索词并搜索具有特定成分的食谱，我成功地做到了这一点，因为它是简单的重定向。但重定向到搜索后，覆盖层保留在页面上，禁用任何单击或滚动，并且仅在刷新页面时消失。我可以做什么来解决这个问题？我们在这个项目中使用 Angular，所以我的所有代码都在 home.component.html 和 .ts

这些是我的 .ts 和 .html。 .ts 代码还有更多内容，但这就是所有相关的内容。我尝试过重写代码以使其对 Angular 更加友好，并向朋友寻求帮助，甚至向 AI 寻求帮助，但都无济于事。由于我对此很陌生，我可能没有注意到您可能清楚的事情，所以请友善。预先感谢您。

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit, OnDestroy {
    searchTerm: string = '';
    private readonly imagesToShowInLandscape = ['bowl', 'paella', 'hotpot', 'omelette', 'brownChunks', 'tomYum', 'fish', 'raznjici', 'chickenThigh'];
    private readonly imagesToHideInPortrait = ['omelette', 'chickenThigh', 'tomYum'];
  
    constructor(private el: ElementRef, private renderer: Renderer2, private router: Router) {}
  
  ngOnInit() {
    const openModalButtons = document.querySelectorAll('a[data-bs-target]');
    const closeModalButtons = document.querySelectorAll('[data-bs-dismiss="modal"]');
    const overlay = document.getElementById('overlay');

    openModalButtons.forEach((button) => {
      button.addEventListener('click', (event) => {
        event.preventDefault(); // Prevent default navigation
        const modalId = (button as HTMLElement).dataset['bsTarget'];
        this.openModal(modalId);
      });
    });

    closeModalButtons.forEach((button) => {
      button.addEventListener('click', () => {
        const modal = (button as HTMLElement).closest('.modal');
        this.closeModal(modal);
      });
    });

    overlay?.addEventListener('click', () => {
      const modals = document.querySelectorAll('.modal.show');
      modals.forEach((modal) => {
        this.closeModal(modal);
      });
    });

    this.adjustImageVisibility();
    window.addEventListener('resize', this.adjustImageVisibility);
  }
  ngOnDestroy() {
    window.removeEventListener('resize', this.adjustImageVisibility);
  }
  search() {
    this.redirectToRecipes(this.searchTerm);
  }

  redirectToRecipes(searchTerm: string) {
    this.router.navigate(['/recipes'], { queryParams: { search: searchTerm } });
  }

  openModal(modalId: string | undefined) {
    if (modalId) {
      $(`#${modalId}`).modal('show');
    }
  }

  closeModal(modal: Element | null) {
    if (modal) {
      $(modal).modal('hide');
    }
  }

<!--<link rel="stylesheet" href="../../../../assets/styles/style.css"/>-->
<div class="row d-flex justify-content-center mt-5">
  <!-- Kuham Button -->
  <div class="col-md-6 d-flex justify-content-center justify-content-md-end">
    <div class="card bg-transparent border-0">
      <div class="card-body d-flex justify-content-center" data-bs-toggle="modal" data-bs-target="#modal1">
        <a class="izberi">
          <span class="button-text">Kuham</span>
          <img src="assets/images/cooking-icon.png" alt="Button Image" id="choice-images" />
        </a>
      </div>
    </div>
  </div>
  <!-- Jem Button -->
  <div class="col-md-6 d-flex justify-content-center justify-content-md-start">
    <div class="card bg-transparent border-0">
      <div class="card-body d-flex justify-content-center" data-bs-toggle="modal" data-bs-target="#modal2">
        <a class="izberi">
          <span class="button-text">Jem</span>
          <img src="assets/images/eating-icon2.png" alt="Button Image" id="choice-images" />
        </a>
      </div>
    </div>
  </div>
</div>
<div class="modal" id="modal">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Recipe title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        recipe
      </div>
    </div>
  </div>
</div>

<div class="modal" id="modal1" #modal1>
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Kaj kuhaš?</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form (ngSubmit)="search()">
          <div class="mb-3">
            <input class="form-control" type="text" [(ngModel)]="searchTerm" name="searchTerm" placeholder="Vpiši ime jedi ali sestavine">
          </div>
          <button type="submit" class="btn btn-primary">Poišči</button>
        </form>
      </div>
    </div>
  </div>
</div>
<div class="modal" id="modal2" #modal2>
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Kaj bi jedel?</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
        <div class="mb-3">
          <label for="exampleInput" class="form-label"></label>
          <input class="form-control" type="text" placeholder="Vpiši ime jedi ali sestavine" aria-label="default input example">
        </div>
        <button type="submit" class="btn btn-primary">Poišči</button>
        </form>
      </div>
    </div>
  </div>
</div>

我之前的所有“修复”实际上并没有起到任何作用。当我尝试 Angular 友好版本时，我什至无法打开它，而且我的任何更改都无法摆脱覆盖层。他们要么扔掉一切，要么什么都不扔。

Answer 1

您可以简单地通过添加

data-bs-dismiss="modal"

使提交按钮关闭模态，并删除所有与 BS 模态相关的代码。

<button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Poišči</button>

另外，不鼓励在 Angular 中使用 jQuery 和 DOM 方法，而是使用

ViewChild

来操作模板的 HTML，例如，在组件中引用模态模板变量，然后在

ngAfterViewInit

中使用 Bootstrap 实例化它：

  @ViewChild('modal1') modal1El!: ElementRef;
  
  modal1!:any;

  ngAfterViewInit() {

    this.modal1 = new bootstrap.Modal(this.modal1El.nativeElement);

  }

参见：如何在 Angular 组件中执行 DOM 操作？