Boostrap 4 Modal 不适用于 Angular 2

Posted 2023-03-05

【中文标题】Boostrap 4 Modal 不适用于 Angular 2

【英文标题】：Boostrap 4 Modal not working on Angular 2

【发布时间】：2018-02-10 01:41:22

【问题描述】：

我尝试使用 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>

【问题讨论】：

你在使用@angular/material吗？

@masterpreenz mmm 不确定那是什么：/

如果你没有使用 ngx-bootstrap/ng-bootstrap。您可能忘记添加 jquery

@brijmcq 你能提供更直接的解决方案吗？不知道你想解释什么。

我无法为您提供这些信息。你能详细说明你做了什么吗？

【参考方案1】：

我强烈建议您使用 angular this 来使用带有 angular 的引导程序，因为它具有 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');

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

【讨论】：

还在 angular.json 的脚本数组中添加“./node_modules/bootstrap/dist/js/bootstrap.min.js”

【参考方案2】：

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

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

【参考方案3】：

这几天我也遇到了同样的问题。最后，我把jQuery的import语句从：

import * as $ from 'jquery';

到：

declare var $ : any;