角2引导日期选择器初始化答案

【问题标题】：angular 2 bootstrap datepicker initialization角2引导日期选择器初始化
【发布时间】：2017-07-20 10:06:12
【问题描述】：

我在我的 Angular 2 应用程序中使用引导 datepiker (http://bootstrap-datepicker.readthedocs.io/en/latest/index.html)，但在初始化时遇到了一些麻烦。

在我的组件中使用以下内容是可行的，但并不漂亮

ngAfterViewInit(): void {
    setTimeout(function() {
      $('.date').each(function() {
        console.log($(this));
        $(this).datepicker({
          format: 'dd.mm.yyyy',
          autoclose: true,
          calendarWeeks: true,
          language: 'de-DE',
          todayHighlight: true
        });
      });
    }, 1000)
  }

有没有办法让这个工作没有 1 秒的脏超时？如果我没有超时，jQuery 选择器不会返回任何内容，并且控制台中没有输出。

【问题讨论】：

你有没有偶然尝试过生命周期法ngAfterViewChecked？
是的。它可以工作，但是 ngAfterViewChecked 经常被调用，所以我最终做了很多不需要的初始化。如果我只在第一次调用 ngAfterViewChecked 时进行初始化，jQuery 选择器似乎仍然找不到 DOM 元素
哦，实际上，尝试在ngAfterViewInit 中使用$(document).ready() 而不是setTimeout。见this question
不幸的是，这不起作用，但还是个好主意
你也可以显示你的html吗？

标签： jquery twitter-bootstrap angular typescript datepicker

【解决方案1】：

问题在于日期选择器在 *ngIf 指令中。

解决方案是使用 @ViewChildren 和 QueryList 并在查询列表更改后进行初始化（订阅更改事件）

【讨论】：