twitter-bootstrap Boostrap 4 Modal 不适用于 Angular 2
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45992642/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Boostrap 4 Modal not working on Angular 2
提问by Ixam Deirf
Im trying to use one example from https://v4-alpha.getbootstrap.com/components/modal/, adding a modal to my navbar , but when clicking nothing happens.
我尝试使用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>
回答by Vikhyath Maiya
I strongly suggest you to use angular thisfor using bootstrap with angular as it has components required for angular and without jquery intervention.
我强烈建议您使用 angular this来使用带有 angular 的引导程序，因为它具有 angular 所需的组件并且无需 jquery 干预。
Having said that for your question you should install jquery in your project using
话虽如此，对于您的问题，您应该使用在您的项目中安装 jquery
npm install jquery --save
After that you have to include jquery in your project angular-cli under script section
之后，您必须在脚本部分下的项目 angular-cli 中包含 jquery
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
//other scripts
]
After this in your component you have to declare $ for using jquery functions as
在此之后，在您的组件中，您必须声明 $ 以使用 jquery 函数作为
declare var $:any;
And in your template give an id to your modal
并在您的模板中为您的模态提供一个 id
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="myModal">
And call a function when the button is clicked
并在单击按钮时调用函数
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm" (click)="openModal()">Small modal</button>
And in your component define the function as
并在您的组件中将函数定义为
openModal(){
$('#myModal').modal('show');
}
Hope this helps.Let me know if any issue pops up
希望这会有所帮助。如果出现任何问题，请告诉我
回答by Sandeep Kumar
I was also running into the same issue for a couple of days. Finally, I changed the import statement of jQuery from:
我也遇到了同样的问题几天。最后，我将 jQuery 的导入语句从：
import * as $ from 'jquery';
import * as $ from 'jquery';
to:
到：
declare var $ : any;
declare var $ : any;
