Angular使用Intersection Observer API实现无限滚动

背景与实现思路：

实现思路非常直观高效：在数据列表底部放置一个“加载提示”元素，一旦该元素进入视口，即自动触发接口请求，将新数据追加到现有数据后方。加载元素随之被新数据推向下一个位置，如此循环往复，从而实现无缝的无限滚动加载体验。

在传统 Angular 实现中，通常借助指令（Directive）的 ngAfterViewInit() 生命周期钩子监听元素出现，随后发射事件让宿主组件执行加载回调。然而，当数据采用异步加载时，ngAfterViewInit 触发时元素可能尚未完全初始化，极易引发 Bug。转而使用 ngAfterViewChecked() 虽能保证稳定性，但每次变更检测都会触发该钩子，导致性能开销显著增加，应用负载明显上升。

因此，推荐直接采用 Intersection Observer API——HTML5 提供的原生观察器。它能够异步检测目标元素与祖先元素（或顶级文档视口）的交叉状态变化，本质上是浏览器底层支持的高效观察机制，性能表现优异。

来看实际效果：为了精确捕捉加载瞬间的状态，我在数据加载函数中特意添加了 1 秒的延迟模拟。

直接奉上完整实现代码。

watch-to-view.directive.ts

import { Directive, Output,EventEmitter, ElementRef } from '@angular/core';
@Directive({
  selector: '[appWatchToView]'
})
export class WatchToViewDirective {
  private observer:IntersectionObserver;
  @Output() appWatchToView = new EventEmitter();
  constructor(public el:ElementRef) {
    this.observer = new IntersectionObserver(this.callback,{rootMargin:'100px',threshold:1,root:null});
    this.observer.observe(el.nativeElement);
   }
  public callback = (entries: IntersectionObserverEntry[]) => {
    entries.forEach((entry: IntersectionObserverEntry) => {
      if (entry.isIntersecting) {
        this.appWatchToView.emit(entry);
      }
    })
  }
}

app.component.html

    

        
{{i}}
    

Loading more...

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = "Tour of Herors";
  batch:Number = 10;
  len:Number = this.batch;
  data:Array=new Array(this.batch).fill(0).map((_,i)=>i);
  loadObserver = async function (event){
    console.log(event.target);
    await new Promise(resolve => setTimeout(resolve, 1000));
    this.data.push(...new Array(this.batch).fill(0).map((_,i)=>i+this.len));
    this.len+=this.batch;
  }
}

配套样式代码也一并给出：

  .blueBox{
    display: block;
    width: 100%;
    height: 100px;
    background-color: #38b1ee;
    margin-top: 5px;
    text-align: center;
    color: white;
    font-size: large;
  }

官方文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API