* ngifの内側にAngular2でjQueryを使用していません

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要素が表示されないため、カウントダウン機能が初期化されません。

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()); 
    } 
} 

しかし、：そして、あなたのコードは*ngIfが評価された後に実行されるため、これを解決する

一つの方法は、（代わりにngAfterViewInit methodの）ngAfterViewChecked methodの内部でそのロジックを実行することですコンポーネントのビューを確認するたびにngAfterViewCheckedメソッドが呼び出されるため、カウントダウンロジックが1回だけ実装されるようにロジックを追加する必要があります。

private isCountdownInitialized: boolean; 

// ... 

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

    // ... 
    } 
}