在* ngif中使用帶有Angular2的jQuery是行不通的

Question

我的Angular2 * ngIf里面有倒計時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方法僅在組件的視圖初始化后調用一次。 由於*ngIf條件還沒有被評估為true時ngAfterViewInit被調用時，你#kodeCountdown元素是不可見的，這意味着你的倒計時功能未初始化。

解決這個問題的ngAfterViewChecked方法是在ngAfterViewChecked方法中執行該邏輯（而不是ngAfterViewInit方法 ），因為那時你的代碼將在評估*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;

    // ...
  }
}

Answer 2

解決這個問題的方法是在子組件中設置jQuery代碼，以釋放父對ngIf限制的使用。