Boostrap 4 Modal无法在Angular 2上运行

Question

我试图使用https://v4-alpha.getbootstrap.com/components/modal/中的一个示例，向我的navbar添加一个模式，但是单击时什么也没有发生。

<div class="pos-f-t fixed-top header">
    <nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md">
        <button class="navbar-toggler navbar-toggler-right" (click)="toggleSidebar()">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="javascript:void(0)">Calculadora ISDB-Tb</a>
 <!-- Small modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

        <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
              ...
            </div>
        </div>
        </div>
    </nav> 
</div>

Answer 1

我强烈建议您使用angular this来使用带有angular的引导程序，因为它具有angular所需的组件，并且无需jquery干预。

话虽如此，对于您的问题，您应该使用

npm install jquery --save

之后，必须在脚本部分的项目angular-cli中包含jquery

"scripts": [  
          "../node_modules/jquery/dist/jquery.min.js",
//other scripts
      ]

之后，您必须在组件中声明$以将jquery函数用作

declare var $:any;

并在您的模板中为您的模态输入一个ID

 <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="myModal">

并在单击按钮时调用函数

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm" (click)="openModal()">Small modal</button>

并在您的组件中将函数定义为

openModal(){
$('#myModal').modal('show');
}

希望对您有所帮助。让我知道是否出现任何问题