javascript - Att använda jQuery med Angular2 inuti *ngIf fungerar inte

Jag har Countdown jQuery-funktion inuti min Angular2 *ngIf och den fungerar inte. Jag har inga fel i min console.log, men div:en är tom. Den visar bara titeln (h1). Här är min kod: HTML

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

Angular2 TypeScript-komponent

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

Resultat: Instrumentpanel

Svar #1

Problemet är att ngAfterViewInit-metoden bara kallas en gång efter att komponentens vy har initialiserats. Eftersom *ngIf-villkoret inte har utvärderats till true när ngAfterViewInit kallas, är ditt #kodeCountdown-element inte synligt, vilket betyder att din nedräkningsfunktion inte initialiseras.

Ett sätt att lösa detta skulle vara att köra den logiken inuti ngAfterViewChecked-metoden (istället för ngAfterViewInit-metoden), eftersom din kod då kommer att köras efter att *ngIf har utvärderats:

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

Men eftersom ngAfterViewChecked-metoden anropas efter varje kontroll av komponentens vy, behöver du lägga till ytterligare logik för att säkerställa att din nedräkningslogik endast implementeras en gång. Du kan helt enkelt sätta en flagga för att hantera det:

private isCountdownInitialized: boolean;

// ...

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

    // ...
  }
}

Svar #2

Ett sätt att kringgå detta är att sätta upp jQuery-kod i en barnkomponent för att frigöra den från förälderns användning av ngIf-begränsningen.

Relaterade artiklar