Question

我正在尝试在角度7中实现引导程序模式，但是该模式无法正常工作。

在脚本的angular.json文件中，我依次包含jquery.min.js和bootstrap.min.js。

我的component.html：

<button type="button" class="catalogue-button btn btn-primary btn-lg" data-toggle="modal"
         data-target="catalogueModal">Katalog</button>
         <!-- The Modal -->
         <div class="modal" id="catalogueModal">
            <div class="modal-dialog">
               <div class="modal-content">

                  <!-- Modal Header -->
                  <div class="modal-header">
                     <h4 class="modal-title">Modal Heading</h4>
                     <button type="button" class="close" data-dismiss="modal">&times;</button>
                  </div>

                  <!-- Modal body -->
                  <div class="modal-body">
                     Modal body..
                  </div>

                  <!-- Modal footer -->
                  <div class="modal-footer">
                     <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                  </div>

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

当我单击按钮时，什么也没有发生。浏览器控制台也为空。

我正在使用此https://www.w3schools.com/bootstrap/bootstrap_modal.asp

Answer 1

看看ngx-bootstrap。它具有无需引导即可使用引导“角度方式”的功能。

它有据可查，您会发现许多小例子。 Here是使用模式的文档。

Answer 2

要打开模式，请在代码中进行以下修改：

将新按钮插入到component.html文件中：

<button (click)="showModal()">Show</button>

在相同组件的打字稿文件中，添加以下方法：

  showModal() {
    $("#catalogueModal").modal('show');
  }

在@Component之前的文件顶部添加以下行：

declare var $: any;

Twitter-bootstrap模态不适用于角度

2 个答案: