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来使用带有角度的bootstrap，因为它有角度所需的组件而没有jquery干预。

说到你的问题，你应该使用

在你的项目中安装jquery

fragment.yourMethod();

之后，您必须在脚本部分

下的项目angular-cli中包含jquery

npm install jquery --save

在组件之后，你必须使用jquery函数声明$ for

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

在你的模板中为你的模态提供一个id

declare var $:any;

单击按钮时调用函数

 <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>

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

Answer 2

确保在bootstrap.min.js的脚本部分中包含angular.json文件：

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

Answer 3

我也遇到了同样的问题，持续了几天。最后，我从：

更改了jQuery的import语句

import * as $ from 'jquery';

为：

declare var $ : any;

Boostrap 4模态不适用于Angular 2

3 个答案: