当元素不在视口中时，Intersection Observer API 仍在执行

Question

我在父组件中多次使用子组件。 在子组件中，我使用交叉观察器来识别每次子组件在视口中可见的时间并执行某些功能。 在执行此操作时，我面临一个问题，例如，即使页面上只有一个子组件可见，交叉点观察者也会在页面加载时多次执行（isIntersecting 标志始终为真）。 有人可以在这里抛出一些光来解决这个问题。 下面是我的代码。 在下面的代码中，我只想在每次不同的子组件在视口中可见时才执行 performloadoperations。

***请注意，我无法将逻辑移动到父组件，因为子组件是一些全局组件，并且此功能只需要附加到子组件。

<parent-comp> 
  <child-comp> </child-comp>
  <div> some long text </div>
  <div> some long text </div> 
  <child-comp> </child-comp> 
</parent-comp>

child-comp.ts *

ngOnInit() {
    if (this.isPlatformBrowser) {
        this.observer = new IntersectionObserver(
            (entries, observer) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting && entry.intersectionRatio >= 0) {
                        performLoadOperations();
                        observer.unobserve(entry.target);
                    }
                });
            }, {
                root: null,
                rootMargin: '0px',
                threshold: 0.5
            }
        );
    }
 }

 ngAfterViewInit() {
    if (this.isPlatformBrowser) {
        this.observer.observe(this.el.nativeElement);
    }

 }
 ngOnDestroy() {
    this.observer.disconnect();
 }

child-comp.html