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

Question

我对客户端 Web 开发还比较陌生，目前正在学习如何使用 Typescript、Angular2(0.27) 和 bootstrap。我知道 Angular2 仍在大力开发中，但我运行遇到了一个问题，我不确定到底是什么（技术）导致了它。该问题与 bootstrap v3 日期时间选择器有关。可以在此处找到有关小部件的更多信息：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 引用生成 html 包含 datetimepicker 小部件的 angular2 应用程序。

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

Answer 1

显然这里的问题是，如果这些 html 脚本块出现在 Angular2 应用程序 html 模板中，那么在 FF 和 IE 中 html 脚本块内的 JS 不会被执行.我不确定这是否是 Angular2 可以解决的问题，或者它是否只是由 chrome/opera parse/handle 与 IE 和 FF 不同的方式引起的。

不管怎样，我现在通过在我的打字稿 Angular2 应用程序的构造函数中执行 datetimepicker 代码来让它工作。您需要引用 datetimepicker (bootstrap.v3.datetimepicker.d.ts) 和 jQuery 的打字稿定义文件，然后使您的应用程序 class 构造函数看起来像这样：

constructor() {
    $(function () {
        $('#datetimepicker1').datetimepicker({
            format: 'DD/MM/YYYY HH:mm'
        });
        console.log('executed datetimepicker from angular2 app constructor');
    });
}

在您的应用程序的构造时间，相应的 datetimepicker1 DOM 元素可用，无论您使用什么（最近）浏览器，JS 都会成功执行。

Answer 2

更'lightweight'的解决方案是将初始化放到ngAfterViewInit中。所以会找到 jQuery 选择器，在呈现 DOM 之后。

export class YourComponent implements AfterViewInit { ...

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

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

Angular2 - Bootstrap v3 datetimepicker issue in FF and IE

web

twitter-bootstrap

bootstrap-datetimepicker

angular