이 글에서는 요소의 가시성 상태, 즉 요소가 들어오고 나갈 때를 추적하는 매우 간단한 Angular 지시문을 만드는 방법을 설명하겠습니다. 뷰포트. 이것이 훌륭하고 유용한 연습이 되기를 바랍니다!

이를 위해 최신 브라우저에서 사용할 수 있는 IntersectionObserver JavaScript API를 사용할 것입니다.

우리가 달성하고 싶은 것

우리는 다음과 같이 지시어를 사용하고 싶습니다:

  I'm being observed! Can you see me yet?

• 가시성은 사용자 정의 지시어의 선택자입니다
• visibleMonitor는 요소를 계속 관찰할지 여부를 지정하는 선택적 입력입니다(false인 경우 뷰포트에 들어갈 때 모니터링 중지)
• visibleChange가 우리에게 알려줍니다.

출력은 다음과 같습니다.

type VisibilityChange =
  | {
      isVisible: true;
      target: HTMLElement;
    }
  | {
      isVisible: false;
      target: HTMLElement | undefined;
    };

정의되지 않은 대상이 있다는 것은 요소가 DOM에서 제거되었음을 의미합니다(예: @if에 의해).

지침 작성

우리 지시문은 단순히 요소를 모니터링할 뿐 DOM 구조를 변경하지 않습니다. 이는 속성 지시문입니다.

@Directive({
  selector: "[visibility]",
  standalone: true
})
export class VisibilityDirective implements OnInit, OnChanges, AfterViewInit, OnDestroy {
  private element = inject(ElementRef);

  /**
   * Emits after the view is initialized.
   */
  private afterViewInit$ = new Subject();

  /**
   * The IntersectionObserver for this element.
   */
  private observer: IntersectionObserver | undefined;

  /**
   * Last known visibility for this element.
   * Initially, we don't know.
   */
  private isVisible: boolean = undefined;

  /**
   * If false, once the element becomes visible there will be one emission and then nothing.
   * If true, the directive continuously listens to the element and emits whenever it becomes visible or not visible.
   */
  visibilityMonitor = input(false);

  /**
   * Notifies the listener when the element has become visible.
   * If "visibilityMonitor" is true, it continuously notifies the listener when the element goes in/out of view.
   */
  visibilityChange = output();
}

위 코드에는 다음이 표시됩니다.

• 앞서 이야기한 입력과 출력
• ngAfterViewInit 수명 주기 후크에 대한 반응 대응 역할을 하는 afterViewInit$(관측 가능 항목)이라는 속성
• 요소 모니터링을 담당하는 IntersectionObserver를 저장할 관찰자라는 속성
• 동일한 상태를 연속해서 두 번 다시 내보내는 것을 방지하기 위해 마지막 가시성 상태를 저장하는 isVisibile이라는 속성

그리고 당연히 지시문을 적용할 DOM 요소를 가져오기 위해 ElementRef를 삽입합니다.

메인 메소드를 작성하기 전에 디렉티브의 라이프사이클을 살펴보겠습니다.

ngOnInit(): void {
  this.reconnectObserver();
}

ngOnChanges(): void {
  this.reconnectObserver();
}

ngAfterViewInit(): void {
  this.afterViewInit$.next();
}

ngOnDestroy(): void {
  // Disconnect and if visibilityMonitor is true, notify the listener
  this.disconnectObserver();
  if (this.visibilityMonitor) {
    this.visibilityChange.emit({
      isVisible: false,
      target: undefined
    });
  }
}

private reconnectObserver(): void {}
private disconnectObserver(): void {}

이제 다음과 같은 일이 발생합니다.

• ngOnInit 및 ngOnChanges 내부에서 관찰자를 다시 시작합니다. 이는 지시문을 반응형으로 만들기 위한 것입니다. 입력이 변경되면 지시문이 다르게 동작하기 시작합니다. ngOnChanges가 ngOnInit 이전에 실행되더라도 템플릿에 입력이 없으면 ngOnChanges 가 실행되지 않기 때문에 여전히 ngOnInit가 필요합니다!
• 뷰가 초기화되면 제목이 트리거되며 몇 초 안에 완료됩니다.
• 메모리 누수를 방지하기 위해 지시문이 파괴되면 관찰자의 연결을 끊습니다. 마지막으로 개발자가 요청한 경우 정의되지 않은 요소를 방출하여 해당 요소가 DOM에서 제거되었음을 알립니다.

교차점 관찰자

이것이 우리 지침의 핵심입니다. reconnectObserver 메소드는 관찰을 시작하는 메소드입니다! 다음과 같을 것입니다:

private reconnectObserver(): void {
    // Disconnect an existing observer
    this.disconnectObserver();
    // Sets up a new observer
    this.observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        const { isIntersecting: isVisible, target } = entry;
        const hasChangedVisibility = isVisible !== this.isVisible;
        const shouldEmit = isVisible || (!isVisible && this.visibilityMonitor);
        if (hasChangedVisibility && shouldEmit) {
          this.visibilityChange.emit({
            isVisible,
            target: target as HTMLElement
          });
          this.isVisible = isVisible;
        }
        // If visilibilyMonitor is false, once the element is visible we stop.
        if (isVisible && !this.visibilityMonitor) {
          observer.disconnect();
        }
      });
    });
    // Start observing once the view is initialized
    this.afterViewInit$.subscribe(() => {
        this.observer?.observe(this.element.nativeElement);
    });
  }

저를 믿으세요. 보이는 것만큼 복잡하지 않습니다! 메커니즘은 다음과 같습니다.

• 먼저 이미 실행 중인 관찰자의 연결을 끊습니다.
• IntersectionObserver를 생성하고 그 동작을 정의합니다. 항목에는 모니터링되는 요소가 포함되므로 해당 요소도 포함됩니다. isIntersecting 속성은 요소의 가시성이 변경되었는지 여부를 나타냅니다. 이를 이전 상태(속성)와 비교하고 만료 예정인 경우 내보냅니다. 그런 다음 나중에 사용할 수 있도록 새 상태를 속성에 저장합니다.
• visibleMonitor가 false인 경우 요소가 표시되자마자 관찰자의 연결을 끊습니다. 작업이 완료됩니다!
• 그런 다음 요소를 전달하여 관찰자를 시작해야 하므로 이를 수행하기 위해 뷰가 초기화될 때까지 기다립니다.

마지막으로 관찰자의 연결을 끊는 방법을 구현해 보겠습니다. 쉽습니다.

 private disconnectObserver(): void {
    if (this.observer) {
      this.observer.disconnect();
      this.observer = undefined;
    }
  }

최종 코드

전체 지시문은 다음과 같습니다. 이것은 단지 연습이었으므로 원하는 대로 자유롭게 변경하세요!

type VisibilityChange =
  | {
      isVisible: true;
      target: HTMLElement;
    }
  | {
      isVisible: false;
      target: HTMLElement | undefined;
    };

@Directive({
  selector: "[visibility]",
  standalone: true
})
export class VisibilityDirective
  implements OnChanges, OnInit, AfterViewInit, OnDestroy {
  private element = inject(ElementRef);

  /**
   * Emits after the view is initialized.
   */
  private afterViewInit$ = new Subject();

  /**
   * The IntersectionObserver for this element.
   */
  private observer: IntersectionObserver | undefined;

  /**
   * Last known visibility for this element.
   * Initially, we don't know.
   */
  private isVisible: boolean = undefined;

  /**
   * If false, once the element becomes visible there will be one emission and then nothing.
   * If true, the directive continuously listens to the element and emits whenever it becomes visible or not visible.
   */
  visibilityMonitor = input(false);

  /**
   * Notifies the listener when the element has become visible.
   * If "visibilityMonitor" is true, it continuously notifies the listener when the element goes in/out of view.
   */
  visibilityChange = output();

  ngOnInit(): void {
    this.reconnectObserver();
  }

  ngOnChanges(): void {
    this.reconnectObserver();
  }

  ngAfterViewInit(): void {
    this.afterViewInit$.next(true);
  }

  ngOnDestroy(): void {
    // Disconnect and if visibilityMonitor is true, notify the listener
    this.disconnectObserver();
    if (this.visibilityMonitor) {
      this.visibilityChange.emit({
        isVisible: false,
        target: undefined
      });
    }
  }

  private reconnectObserver(): void {
    // Disconnect an existing observer
    this.disconnectObserver();
    // Sets up a new observer
    this.observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        const { isIntersecting: isVisible, target } = entry;
        const hasChangedVisibility = isVisible !== this.isVisible;
        const shouldEmit = isVisible || (!isVisible && this.visibilityMonitor);
        if (hasChangedVisibility && shouldEmit) {
          this.visibilityChange.emit({
            isVisible,
            target: target as HTMLElement
          });
          this.isVisible = isVisible;
        }
        // If visilibilyMonitor is false, once the element is visible we stop.
        if (isVisible && !this.visibilityMonitor) {
          observer.disconnect();
        }
      });
    });
    // Start observing once the view is initialized
    this.afterViewInit$.subscribe(() => {
        this.observer?.observe(this.element.nativeElement);
    });
  }

  private disconnectObserver(): void {
    if (this.observer) {
      this.observer.disconnect();
      this.observer = undefined;
    }
  }
}