我是客户端 Web 开发的新手，目前正在学习如何使用 Typescript、Angular2(0.27) 和 Bootstrap 。我知道 Angular2 仍在大力开发中，但我遇到了一个问题，我不确定到底是什么(技术)导致了它。问题与 bootstrap v3 datetimepicker 有关。 可以在此处找到有关小部件的更多信息:https://eonasdan.github.io/bootstrap-datetimepicker/
问题是在 Firefox(最新版)和 IE11 浏览器中，如果 datetimepicker 代码 (html&js) 在 angular2 应用程序 html 中，则不会出现 datetimepicker 的弹出窗口，而在 google chrome 中它工作正常。对于 FF 和 IE11，当我将代码直接放在 index.html 主体中时，它确实可以正常工作。
这是我使用的小部件 html:
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input placeholder="RAW" type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
index.html 中的正文如下所示:
<body>
<my-app></my-app>
<script type="text/javascript">
System.config({
baseURL: '/'
});
System.import('~/app');
</script>
</body>
my-app 引用生成包含 datetimepicker 小部件的 html 的 angular2 应用程序。
关于导致此问题的原因或如何规避此问题的任何提示？我尝试将“.datetimepicker()”js 调用放入在窗口或文档加载时执行的代码中，但这没有任何区别。
最佳答案
显然这里的问题是，在 FF 和 IE 中，如果这些 html 脚本 block 出现在 Angular2 应用程序 html 模板中，则不会执行 html 脚本 block 中的 JS。我不确定这是否是 Angular2 可以解决的问题，或者它是否只是由 chrome/opera 解析/处理它的方式不同于 IE 和 FF 造成的。
无论哪种方式，我现在都通过在我的 typescript Angular2 应用程序的构造函数中执行 datetimepicker 代码来让它工作。您需要引用 datetimepicker (bootstrap.v3.datetimepicker.d.ts) 和 jQuery 的 typescript 定义文件，然后使您的应用程序类构造函数看起来像这样:
constructor() {
$(function () {
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY HH:mm'
});
console.log('executed datetimepicker from angular2 app constructor');
});
}
在您的应用程序的构造时间，相应的 datetimepicker1 DOM 元素可用，无论您使用什么(最近)浏览器，JS 都会成功执行。
关于twitter-bootstrap - Angular2 - FF 和 IE 中的 Bootstrap v3 datetimepicker 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30943772/