Boostrap 4 Modal没有在Angular 2上工作

我试图使用https://v4-alpha.getbootstrap.com/components/modal/中的一个例子，在我的导航栏中添加一个模式，但是当点击什么都不会发生。Boostrap 4 Modal没有在Angular 2上工作

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

来源

2017-09-01 Ixam Deirf

您使用'@角/ material'最后，我从改变的jQuery的import语句？ – masterpreenz

@masterpreenz嗯不知道是什么：/ –

如果你不使用ngx-bootstrap/ng-bootstrap。你可能忘了添加jquery – brijmcq

我强烈建议你使用角度this使用引导具有角，因为它有角，无jQuery的干预所需的组件。

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

npm install jquery --save

之后，你必须包括在脚本部分

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

项目角度-CLI在此之后的jQuery安装在您的项目的jQuery在你的组件中，你必须声明$使用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'); 
}

希望的功能这有助于。让我知道如果有任何问题弹出

来源

2017-09-01 15:16:34

我也遇到了同样的问题你好几天。

import * as $ from 'jquery';

到：

declare var $ : any;

来源

2018-02-08 12:34:36 SKrudra

Boostrap 4 Modal没有在Angular 2上工作

回答

相关问题