Intersection Observer 在 ngAfterViewInit 上触发回调两次

Question

我尝试在我的 angular 7 应用程序中使用 Intersection Observable 延迟加载图像。我从 ngAfterViewInit 生命周期挂钩中调用了 Intersection Observable。但是当我加载应用程序时，回调被调用两次，一次是所有 isIntersecting 值都为真，下一次是正确的 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);
    });
 }

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

更新：现在路口观察器被完美地调用了，但是现在出现了一个问题。由于我们使用 document.querySelectorAll 其中 returns 静态节点列表，一旦数组被更新，节点列表就不会更新。如果我尝试使用 document.getElementsByClassName，则会抛出错误，因为它不是节点列表 ???

Answer 1

我通过删除 ngOnInit() 解决了这个问题，因为它在加载后再次触发 ngAfterViewInit()。

Answer 2

也许这也行得通：

if (entry.isIntersecting && Math.floor(entry.intersectionRatio) === 1) { 
  const el = entry.target;
  if (el.id === ('test' + this.testCount)) {
    console.log(entry);
  }
} else {
  return;
}

"如果不检查intersectionRatio ratio === 1，被观察元素会触发两次回调，因为当马上passing/leaving 100%阈值时，观察者会触发isIntersecting = true , intersectionRatio ~= 0.9 （可能是错误）。 Chrome 以某种方式使第一个框的 intersectionRatio 略高于 1，因此降低值 "

来源：https://codepen.io/mmanney/details/erpZbd

Intersection Observer 在 ngAfterViewInit 上触发回调两次

Intersection Observer triggering callback twice on ngAfterViewInit

javascript

typescript

angular

intersection-observer