元素在视图中时的角度检查

Question

在角度中，如何检测某个元素是否在视图中？

例如，我有以下内容：

<div class="test">Test</div>

有没有办法检测这个div何时在视野中？

感谢。

Answer 1

您可以使用ngui-common软件包 https://github.com/allenhwkim/ngui-common

Answer 2

基于此answer，适用于Angular：

模板：

<div #testDiv class="test">Test</div>

组件：

@ViewChild('testDiv') private testDiv: ElementRef<HTMLDivElement>;

isScrolledIntoView(){
  if (this.testDiv){
    const rect = this.testDiv.nativeElement.getBoundingClientRect();
    const topShown = rect.top >= 0;
    const bottomShown = rect.bottom <= window.innerHeight;
    this.isTestDivScrolledIntoView = topShown && bottomShown;
  }
}

Example with scroll event binding

另一个不错的功能是确定将<div>中的多少视为“视野内”。 Here's a reference进行这种实现。

Answer 3

这是您可以使用的指令。它使用闪亮的 IntersectionObserver API

指令

import {AfterViewInit, Directive, TemplateRef, ViewContainerRef} from '@angular/core'

@Directive({
  selector: '[isVisible]',
})

/**
 * IS VISIBLE DIRECTIVE
 * --------------------
 * Mounts a component whenever it is visible to the user
 * Usage: <div *isVisible>I'm on screen!</div>
 */
export class IsVisible implements AfterViewInit {

  constructor(private vcRef: ViewContainerRef, private tplRef: TemplateRef<any>) {
  }

  ngAfterViewInit() {
    const observedElement = this.vcRef.element.nativeElement.parentElement

    const observer = new IntersectionObserver(([entry]) => {
      this.renderContents(entry.isIntersecting)
    })
    observer.observe(observedElement)
  }

  renderContents(isIntersecting: boolean) {

    this.vcRef.clear()

    if (isIntersecting) {
      this.vcRef.createEmbeddedView(this.tplRef)
    }
  }
}

用法

<div *isVisible>I'm on screen!</div>