小编Ram*_*Ram的帖子

路口观察者在 ngAfterViewInit 上触发回调两次

我尝试在我的 Angular 7 应用程序中使用 Intersection Observable 延迟加载图像。我从 ngAfterViewInit 生命周期钩子中调用了 Intersection Observable。但是当我加载应用程序时,回调被调用两次,一次所有 isIntersecting 值都为 true,下一次调用正确的 isIntersecting 值。我对这种行为感到困惑。

ngAfterViewInit() {
const imgOne = document.querySelectorAll('[data-class]');

    const options = {
      // root: document
      // threshold: 0
    };

    const observer = new IntersectionObserver((entries, observer) => {
      console.log(entries.length);
      entries.forEach((entry) => {
        // console.log(entry);
        if (!entry.isIntersecting) {
          return;
        } else {
          const el = entry.target;
          if (el.id === ('test' + this.testCount)) {
            console.log(entry);
          }
          // observer.unobserve(entry.target);
        }
      });
    });

    imgOne.forEach((eachQuery) => {
      observer.observe(eachQuery);
    });
 }
Run Code Online (Sandbox Code Playgroud)

https://stackblitz.com/edit/angular-wqbuyr

更新:现在交叉观察器被完美调用,但现在出现了问题。由于我们使用 …

javascript typescript angular intersection-observer

4
推荐指数
1
解决办法
4979
查看次数