javascript - Bootstrap 4 Modal 不适用于 Angular 2

Question

我正在尝试使用 https://v4-alpha.getbootstrap.com/components/modal/ 中的一个示例，向我的导航栏添加一个模式，但点击时没有任何反应。

<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 Bootstrap ，因为它具有 Angular 所需的组件且无需 jquery 干预。

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

在您的项目中安装 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');
}

希望这对您有所帮助。如果出现任何问题，请告诉我