Question

我对客户端Web开发很新，目前正在学习如何使用Typescript，Angular2（0.27）和bootstrap。我知道Angular2仍处于重大发展阶段，但我遇到了一个问题，其中我不确定究竟是什么（技术）导致它。问题与bootstrap v3 datetimepicker有关。有关小部件的更多信息，请访问：https://eonasdan.github.io/bootstrap-datetimepicker/

问题是在Firefox（最新）和IE11浏览器中，如果datetimepicker代码（html＆amp; 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加载执行的代码中，但这没有任何区别。

Answer 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都将成功执行。

Answer 2

更轻盈的＆＃39;解决方案是将初始化放入ngAfterViewInit。所以jQuery选择器将被找到，在之后呈现DOM。

export class YourComponent implements AfterViewInit { ...

ngAfterViewInit(): void {
    $('#datetimepicker1').datetimepicker({
            format: 'DD/MM/YYYY HH:mm'
    });
}

Angular2 - FF和IE中的Bootstrap v3 datetimepicker问题

2 个答案: