Javascript 交叉点观察者在ngAfterViewInit上触发回调两次

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

ngAfterViewInit（）{
const imgOne=document.querySelectorAll（“[dataclass]”）；
常量选项={
//根：文档
//阈值：0
};
const observer=新的IntersectionObserver（（条目，observer）=>{
console.log（条目.长度）；
条目。forEach（（条目）=>{
//控制台日志（条目）；
如果（！entry.isIntersecting）{
回来
}否则{
const el=entry.target；
如果（el.id==（'test'+this.testCount））{
控制台日志（条目）；
}
//观察者。未观察者（进入。目标）；
}
});
});
imgOne.forEach（（每个查询）=>{
观察者，观察者（每个查询）；
});
}

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

也许这也可以：

if（entry.isIntersecting&&Math.floor（entry.intersectionRatio）==1）{
const el=entry.target；
如果（el.id==（'test'+this.testCount））{
控制台日志（条目）；
}
}否则{
回来
}

“如果不检查intersectionRatio==1，则观察到的元素将触发回调两次，因为当立即通过/离开100%阈值时，观察者将触发isIntersecting=true，intersectionRatio~=0.9（可能是错误）。 Chrome在第一个框中的intersectionRatio略高于1，因此将值设置为“floor”

---

来源：

你有没有用这种方式尝试过

observer.observe（imgOne）

，不需要使用Ach。将类用于queryselector，而不是数据属性

observer.observe（document.querySelectorAll（'img.lzy\u img'）它将抛出一个错误-“类型为'NodeListOf'的参数不可分配给类型为'Element'的参数”。因为observe获取单个元素作为其参数，而不是元素数组。请创建stackblitz示例