html - 如何在 anchor 链接上单击 Angular 打开 Bootstrap 弹出模式

Question

我有 Angular 应用程序。我想在用户单击页脚中的链接时打开 Bootstrap 弹出模式。以下是my Bootstrap modal code .

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

下面是footer.component.html文件

<footer class="text-center text-lg-start bg-light text-muted fixed-bottom">
    <div class="text-center p-2" style="background-color: gray;">
      Copyright 2001-2022. All rights reserved. For internal use only.

      <a class="text-reset" data-toggle="collapse" 
      [attr.data-target]="'#exampleModalCenter'">Terms of Use | </a>
      <a class="text-reset" href="https://mdbootstrap.com/">Privacy Statement</a>
    </div>
</footer>

我需要在哪里保存模式代码，在 footer.component 中还是单独的组件中？当用户点击页脚中的 anchor 链接使用条款时，如何打开它？

我正在使用这些版本:

"bootstrap": "5.2",
"@angular/core": "^14.2.0"

Answer 1

首先，您似乎正在使用普通 javascript 和 HTMl 的 Bootstrap 库。您应该考虑切换到“Angularpowered Bootstrap”( https://ng-bootstrap.github.io/#/ )，以便利用 Angular 的优势。您将获得相同的组件，但能够在您的 Angular 应用程序中注入(inject)不同的模块。

之后，您应该创建一个包含弹出模式代码的新组件。

然后您可以在页脚组件中注入(inject) NgbModal，如下所示:constructor(private modalService: NgbModal) {}

然后，您可以使用 const modalRef = this.modalService.open(YourTermsOfUseComponent); 打开按钮单击模式

有关如何从 Angular 分量打开模态的更多信息，请参见:https://ng-bootstrap.github.io/#/components/modal/examples