Javascript 在*ngif内使用带有Angular2的jQuery不起作用

我的Angular2*ngIf中有倒计时jQuery函数，但它不起作用。我的console.log中没有任何错误，但是div是空的。它只是显示标题（h1）。 这是我的密码： HTML

结果: 仪表板

问题是组件视图初始化后只调用一次。由于调用

ngAfterViewInit

时，

*ngIf

条件未被计算为

true

，因此您的

#kodeCountdown

元素不可见，这意味着您的倒计时函数未初始化

解决此问题的一种方法是在内部执行该逻辑（而不是），因为这样您的代码将在对

*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;

    // ...
  }
}

---

解决此问题的一种方法是在子组件中设置jQuery代码，使其不受父组件对ngIf的使用限制。

不太熟悉A2-但您不需要在ngIf中引用控制器吗？例如-ngIf=“sampleController.isDataAvailable”…实际上，我在这个标记中也有一个标题，它只是显示标题（h1），而不是倒计时。你怎么做？

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

private isCountdownInitialized: boolean;

// ...

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

    // ...
  }
}