我对客户端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:
Excel.Application xlApp;
Excel.Workbook xlWorkBook;
Excel.Worksheet xlWorkSheet1;
xlApp = new Excel.Application();
xlWorkBook = xlApp.Workbooks.Open(Directory.GetCurrentDirectory() + "\\template.xls");
xlWorkSheet1 = (Excel.Worksheet)xlWorkBook.Worksheets.get_Item(1);
xlWorkSheet1.Cells[1, 1] = "h1";
xlWorkBook.SaveAs(saveFileDialog1.FileName, Excel.XlFileFormat.xlWorkbookNormal, misValue, misValue, misValue, misValue, Excel.XlSaveAsAccessMode.xlExclusive, misValue, misValue, misValue, misValue, misValue);
xlApp.Quit();
releaseObject(xlWorkSheet1);
releaseObject(xlWorkBook);
releaseObject(xlApp);
index.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>
my-app引用angular2应用程序,该应用程序生成包含datetimepicker小部件的html。
有关导致此问题的原因或如何规避问题的任何提示?我尝试将'.datetimepicker()'js调用放在窗口或doc加载执行的代码中,但这没有任何区别。
答案 0 :(得分:1)
显然这里的问题是在FF和IE中,如果这些html脚本块出现在Angular2应用程序html模板中,则不会执行html脚本块中的JS。我不确定这是否是Angular2可以解决的问题,或者它是否仅仅是因为chrome / opera解析/处理它的方式与IE和FF不同。
无论哪种方式,我现在通过在我的打字稿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都将成功执行。
答案 1 :(得分:0)
更轻盈的&#39;解决方案是将初始化放入ngAfterViewInit。所以jQuery选择器将被找到,在之后呈现DOM。
export class YourComponent implements AfterViewInit { ...
ngAfterViewInit(): void {
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY HH:mm'
});
}