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上工作

回答

相關問題