Question

我的Angular2 * ngIf中有Countdown jQuery函数，但它无效。我的console.log中没有任何错误，但div为空。它只是显示标题（h1）。这是我的代码： HTML

<div class="row" *ngIf="isDataAvailable"><h1>Dashboard</h1><div id="kodeCountdown"></div></div>

Angular2 TypeScript组件

ngOnInit() {
     this.getData().then(() => this.isDataAvailable = true); 
}
ngAfterViewInit() {
        if ($('#kodeCountdown').length) {
            var austDay = new Date();
            austDay = new Date(2017, 3, 2, 12, 10);
            jQuery('#kodeCountdown').countdown({ until: austDay });
            jQuery('#year').text(austDay.getFullYear());
        }
    }

结果：的控制台

Answer 1

问题是ngAfterViewInit method仅在组件视图初始化后调用一次。由于调用*ngIf时true条件尚未评估为ngAfterViewInit，因此您的#kodeCountdown元素不可见，这意味着您的倒计时功能未初始化。

解决此问题的一种方法是在ngAfterViewChecked method（而不是ngAfterViewInit method）内部执行该逻辑，因为这样您的代码将在 {{之后执行已经评估过1}}：

*ngIf

但是，由于在每次检查组件视图后都会调用ngOnInit() { this.getData().then(() => this.isDataAvailable = true); } ngAfterViewChecked() { if ($('#kodeCountdown').length) { var austDay = new Date(); austDay = new Date(2017, 3, 2, 12, 10); jQuery('#kodeCountdown').countdown({ until: austDay }); jQuery('#year').text(austDay.getFullYear()); } }方法，因此您需要添加其他逻辑以确保倒计时逻辑仅实现一次。你可以简单地设置一个标志来处理：

ngAfterViewChecked

Answer 2

一种解决方法是在子组件中设置jQuery代码，以使它摆脱父级对ngIf限制的使用。

在* ngif中使用带有Angular2的jQuery无效

2 个答案: