Angular 6不支持Bootstrap 3 Datepicker

Question

我正在开发一个Angular 6应用程序。我开始用一个简单的datepicker创建一个组件。我不得不使用这个插件：https://eonasdan.github.io/bootstrap-datetimepicker/

即使我在"angular.json“文件中放入了正确的依赖项.css和.js ( css可以很好地工作；以下是脚本.js)：

            "scripts": [
          "src/jquery/jquery-3.1.1.min.js",
          "src/bootstrap/js/bootstrap.min.js",
          "src/bootstrap-datetimepicker/js/moment.min.js",
          "src/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"            
        ].

我的组件的模板html是：

<div class="form-group">
<label>Date</label>
<div class="input-group date" id="datetimepicker1">
    <input type="text" class="form-control field-8">
    <span class="input-group-addon">
        <span>today</span>
    </span>
</div>
</div>

<script type="text/javascript">
   $('#datetimepicker1').datetimepicker({ format: 'DD/MM/YYYY' });
</script>

但是如果我点击按钮，日期选择器就不会出现！(使用普通的html页面，一切都可以完美地工作！)。如何解决此问题？谢谢!

Answer 1

我更喜欢，请不要在Angular 2+中使用JQuery元素，你可以在Angular 2+中找到相同的插件/组件。如果您想继续执行此操作，请将此$('#datetimepicker1').datetimepicker({ format: 'DD/MM/YYYY' }); in ngAfterViewInit方法添加到component.ts文件中。

如果它不工作，则添加此$('#datetimepicker1').datetimepicker({ format: 'DD/MM/YYYY' });，并设置in timeout。

在Angular 2+中加载视图零件后，ngAfterViewInit将执行。我在我的项目中使用了Primeng组件。