在Angular组件中测试IntersectionObserver

import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <div class="target" #targetElement></div>
  `,
  styles: [`
    .target {
      height: 200px;
      background-color: red;
    }
  `]
})
export class MyComponent implements AfterViewInit {
  constructor() { }

  ngAfterViewInit() {
    const targetElement = document.querySelector('.target');
    const options = {
      root: null,
      rootMargin: '0px',
      threshold: 1.0
    };

    const callback = (entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          // 目标元素进入视窗
          console.log('Target element is visible');
        } else {
          // 目标元素离开视窗
          console.log('Target element is not visible');
        }
      });
    };

    const observer = new IntersectionObserver(callback, options);
    observer.observe(targetElement);
  }
}