使用jQuery與Angular2裏面* ngif不工作

Question

我在我的Angular2 * ngIf裏面有Countdown jQuery函數，它不工作。我的console.log中沒有任何錯誤，但是div是空的。它只是顯示標題（h1）。 這裏是我的代碼： HTML

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

Angular2打字稿組件

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只調用組件的視圖有一次後已初始化。由於調用ngAfterViewInit時*ngIf條件尚未評估爲true，因此您的#kodeCountdown元素不可見，這意味着您的倒計時功能未初始化。解決這個

的一種方法是執行ngAfterViewChecked method的內部的邏輯（而不是ngAfterViewInit method），因爲那時你的代碼將*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方法，因此需要添加其他邏輯以確保倒計時邏輯僅實現一次。你可以簡單地設置一個標誌來處理：

private isCountdownInitialized: boolean; 

// ... 

ngAfterViewChecked() { 
    if (!this.isCountdownInitialized && $('#kodeCountdown').length) { 
    this.isCountdownInitialized = true; 

    // ... 
    } 
}