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

【问题标题】：Angular2 - Bootstrap v3 datetimepicker issue in FF and IEAngular2 - FF 和 IE 中的 Bootstrap v3 datetimepicker 问题
【发布时间】：2017-02-01 22:17:31
【问题描述】：

我对客户端 Web 开发相当陌生，目前正在学习如何使用 Typescript、Angular2(0.27) 和引导程序。我知道 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 指的是 angular2 应用程序，该应用程序生成包含 datetimepicker 小部件的 html。

有关导致此问题的原因或我如何规避此问题的任何提示？我尝试将 '.datetimepicker()' js 调用放入在窗口或文档加载时执行的代码中，但这没有任何区别。

【问题讨论】：

标签： twitter-bootstrap web bootstrap-datetimepicker angular

【解决方案1】：

显然这里的问题是，在 FF 和 IE 中，如果这些 html 脚本块出现在 Angular2 应用程序 html 模板中，则不会执行 html 脚本块内的 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 都会成功执行。

【讨论】：

自我回答。干得好）
有没有办法从风格的角度来定制这个日历？如果是，请给我链接。

【解决方案2】：

更“轻量级”的解决方案是将初始化放入 ngAfterViewInit。所以会找到 jQuery 选择器，在渲染 DOM 之后。

export class YourComponent implements AfterViewInit { ...

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

【讨论】：