如何修复Angular 7中的引导模式？

当我点击AddBlogger时，页面被重定向到主页，而不是打开模式。我如何解决这个问题

<a href="#" class="btn btn-outline-light btn-sm" data-toggle="modal" data-target="#addblogger">Add Blogger</a>


<div class="modal fade" id="addblogger">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header bg-success text-white">
        <h5 class="modal-title">Add New Blogger</h5>
        <button class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">

        <div class="modal-footer">

        </div>
      </div>
    </div>
  </div>
</div>

添加新博客
&时代；

您需要将模态的id作为元素的href，否则“#”将导致重定向

<a href="#addblogger" class="btn btn-outline-light btn-sm" data-toggle="modal">
  Add Blogger
</a>

您可以按自己的方式执行（使用data-target属性），但需要在href-上使用javascript:void（0）以避免重定向。但我不会这么做

<a href="javascript:void(0)" class="btn btn-outline-light btn-sm" data-toggle="modal" data-target="addblogger">
  Add Blogger
</a>

如果我要使用数据目标和btn类，我会使用按钮元素。

<button type="button" class="btn btn-outline-light btn-sm" data-toggle="modal" data-target="addblogger">
  Add Blogger
</button>

添加博客