Verwenden von jQuery mit Angular2 innerhalb * ngif funktioniert nicht

Question

Ich habe Countdown jQuery-Funktion in meinem Angular2 * ngIf und es funktioniert nicht. Ich habe keinen Fehler in meinem console.log, aber das div ist leer. Es zeigt nur den Titel (h1). Hier ist mein Code: HTML

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

Angular2 Typoskript Komponente

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

Ergebnis: Armaturenbrett

Answer 1

Das Problem ist, dass die ngAfterViewInit method nur einmal nach Ansicht der Komponente aufgerufen wird, hat wurde initialisiert. Da die *ngIf-Bedingung nicht zu true ausgewertet wurde, wenn ngAfterViewInit aufgerufen wird, ist Ihr #kodeCountdown Element nicht sichtbar, was bedeutet, dass Ihre Countdown-Funktion nicht initialisiert ist.

Eine Möglichkeit, dies zu lösen, wäre diese Logik auszuführen innerhalb der ngAfterViewChecked method (anstelle der ngAfterViewInit method), denn dann wird Ihr Code nach*ngIf wurde ausgewertet ausgeführt werden:

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

jedoch Da die Methode ngAfterViewChecked nach jeder Prüfung der Ansicht der Komponente aufgerufen wird, müssen Sie zusätzliche Logik hinzufügen, um sicherzustellen, dass Ihre Countdown-Logik nur einmal implementiert wird. Sie könnten einfach eine Flagge setzen, um damit umzugehen:

private isCountdownInitialized: boolean; 

// ... 

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

    // ... 
    } 
}