Angular2 - FF和IE中的引导v3日期选择器问题
我对客户端的web开发相当陌生，目前正在学习如何使用类型记录、Angular2(0.27)和引导程序。我知道Angular2还在开发中，但我遇到了一个问题，我不知道到底是什么(技术)导致了它。这个问题与引导v3日期选择器有关。有关这个小部件的更多信息可以在这里找到：https://eonasdan.github.io/bootstrap-datetimepicker/
问题是，在火狐(最新版)和IE11浏览器中，如果日期选择器代码( html &js)位于angular2应用程序html中，则不会出现日期选择器的弹出，而在google中，它工作得很好。对于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引用angular2应用程序，该应用程序生成包含日期选择器小部件的html。
对于是什么原因造成的，或者我怎样才能回避这个问题，有什么暗示吗？我尝试将'.datetimepicker()‘js调用放入在窗口或文档加载时执行的代码中，但这并没有产生任何区别。
回答 2
Stack Overflow用户
发布于 2015-06-20 14:28:52
显然，这里的问题是，在FF和IE中，如果html脚本块中的JS出现在Angular2应用程序html模板中，则不会执行这些JS。我不确定这是否是Angular2能够解决的问题，还是仅仅是因为chrome/opera解析/处理它的方式与IE和FF不同。
无论是哪种方式，我现在都可以通过在我的类型记录Angular2应用程序的构造函数中执行datetimepicker选择器代码来工作。您需要引用日期选择器(bootstrap.v3.datetimepicker.d.ts)和jQuery的类型记录定义文件，然后使应用程序类构造函数看起来如下所示：
constructor() {
$(function () {
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY HH:mm'
});
console.log('executed datetimepicker from angular2 app constructor');
});
}在应用程序的构造函数时，相应的datetimepicker1 DOM元素是可用的，无论您使用什么(最近的)浏览器，JS都将被成功地执行。
Stack Overflow用户
发布于 2017-02-01 14:17:31
一个更“轻量级”的解决方案是将初始化放到ngAfterViewInit中。因此，将找到jQuery选择器，在呈现DOM之后进行。
export class YourComponent implements AfterViewInit { ...
ngAfterViewInit(): void {
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY HH:mm'
});
}https://stackoverflow.com/questions/30943772
复制相似问题
腾讯云开发者
