Angular 4项目组件按需加载：滚动触发剩余组件加载方案咨询

嘿，这个需求太贴合实际场景了——针对用户的停留行为优化首屏加载，确实能有效提升性能！在Angular 4里，我们可以通过滚动监听结合条件渲染的方式，实现组件的按需加载，下面给你详细拆解两种可行方案：

核心思路 #

我们的目标是：只有当用户滚动到对应组件的位置（或即将到达）时，才让Angular渲染该组件。核心逻辑就是监听页面滚动事件 + 判断组件是否进入视口 + 条件渲染组件。

方案一：手动监听滚动事件（兼容所有浏览器） #

步骤1：在模板中设置组件占位与渲染开关 #

给需要延迟加载的4个组件（WhytoUSe、Slider、WhatweDo、Footer）添加占位容器，用*ngIf控制组件是否渲染：

<!-- 前两个组件直接渲染，不做延迟 -->
<app-header></app-header>
<app-topbanner></app-topbanner>

<!-- 待滚动加载的组件：用容器占位，通过变量控制渲染 -->
<div #whyToUseContainer>
  <app-why-to-use *ngIf="loadWhyToUse"></app-why-to-use>
</div>

<div #sliderContainer>
  <app-slider *ngIf="loadSlider"></app-slider>
</div>

<div #whatWeDoContainer>
  <app-what-we-do *ngIf="loadWhatWeDo"></app-what-we-do>
</div>

<div #footerContainer>
  <app-footer *ngIf="loadFooter"></app-footer>
</div>

步骤2：在组件类中实现滚动监听与视口判断 #

通过ViewChild获取占位容器的DOM引用，监听滚动事件并判断元素是否进入视口（可以设置提前加载的偏移量，提升用户体验）：

import { Component, ViewChild, ElementRef, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit, OnDestroy {
  // 控制组件加载的开关变量，初始为false（不渲染）
  loadWhyToUse = false;
  loadSlider = false;
  loadWhatWeDo = false;
  loadFooter = false;

  // 获取各个占位容器的DOM引用
  @ViewChild('whyToUseContainer') whyToUseContainer!: ElementRef;
  @ViewChild('sliderContainer') sliderContainer!: ElementRef;
  @ViewChild('whatWeDoContainer') whatWeDoContainer!: ElementRef;
  @ViewChild('footerContainer') footerContainer!: ElementRef;

  private scrollListener!: () => void;

  ngOnInit(): void {
    // 页面加载完成后先检查一次，避免大屏幕用户看不到组件
    this.checkElementsInView();

    // 绑定滚动监听事件（加防抖优化性能）
    this.scrollListener = this.debounce(() => {
      this.checkElementsInView();
    }, 100);
    window.addEventListener('scroll', this.scrollListener);
  }

  ngOnDestroy(): void {
    // 组件销毁时移除监听，防止内存泄漏
    window.removeEventListener('scroll', this.scrollListener);
  }

  // 防抖函数：减少滚动事件触发频率
  private debounce(func: Function, delay: number) {
    let timeoutId: any;
    return (...args: any[]) => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => func.apply(this, args), delay);
    };
  }

  // 判断元素是否进入/即将进入视口
  private checkElementsInView(): void {
    // 计算视口底部的位置（当前滚动距离 + 屏幕高度）
    const viewportBottom = window.innerHeight + window.scrollY;

    // 检查WhytoUSe组件：提前100px加载，避免用户看到空白
    const whyToUseTop = this.whyToUseContainer.nativeElement.getBoundingClientRect().top + window.scrollY;
    if (whyToUseTop <= viewportBottom + 100 && !this.loadWhyToUse) {
      this.loadWhyToUse = true;
    }

    // 检查Slider组件
    const sliderTop = this.sliderContainer.nativeElement.getBoundingClientRect().top + window.scrollY;
    if (sliderTop <= viewportBottom + 100 && !this.loadSlider) {
      this.loadSlider = true;
    }

    // 检查WhatweDo组件
    const whatWeDoTop = this.whatWeDoContainer.nativeElement.getBoundingClientRect().top + window.scrollY;
    if (whatWeDoTop <= viewportBottom + 100 && !this.loadWhatWeDo) {
      this.loadWhatWeDo = true;
    }

    // 检查Footer组件
    const footerTop = this.footerContainer.nativeElement.getBoundingClientRect().top + window.scrollY;
    if (footerTop <= viewportBottom + 100 && !this.loadFooter) {
      this.loadFooter = true;
    }
  }
}

方案二：使用Intersection Observer API（更高效简洁） #

如果你的项目不需要兼容太老的浏览器，推荐用浏览器原生的Intersection Observer API——它专门用来监听元素是否进入视口，性能比手动监听滚动事件更好，代码也更简洁：

import { Component, ViewChild, ElementRef, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit, OnDestroy {
  loadWhyToUse = false;
  loadSlider = false;
  loadWhatWeDo = false;
  loadFooter = false;

  @ViewChild('whyToUseContainer') whyToUseContainer!: ElementRef;
  @ViewChild('sliderContainer') sliderContainer!: ElementRef;
  @ViewChild('whatWeDoContainer') whatWeDoContainer!: ElementRef;
  @ViewChild('footerContainer') footerContainer!: ElementRef;

  private observers: IntersectionObserver[] = [];

  ngOnInit(): void {
    // 配置观察者：提前100px触发，元素10%进入视口时加载
    const observerOptions = {
      root: null, // 以视口为根元素
      rootMargin: '100px 0px', // 提前100px检测
      threshold: 0.1 // 元素10%可见时触发
    };

    // 为每个组件容器创建观察者
    this.createObserver(this.whyToUseContainer.nativeElement, () => this.loadWhyToUse = true);
    this.createObserver(this.sliderContainer.nativeElement, () => this.loadSlider = true);
    this.createObserver(this.whatWeDoContainer.nativeElement, () => this.loadWhatWeDo = true);
    this.createObserver(this.footerContainer.nativeElement, () => this.loadFooter = true);
  }

  // 创建观察者的复用方法
  private createObserver(element: Element, callback: () => void): void {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          callback();
          observer.unobserve(element); // 触发后停止监听，避免重复加载
        }
      });
    }, { rootMargin: '100px 0px', threshold: 0.1 });

    observer.observe(element);
    this.observers.push(observer);
  }

  ngOnDestroy(): void {
    // 销毁所有观察者，释放资源
    this.observers.forEach(observer => observer.disconnect());
  }
}

这个方案不需要手动计算滚动距离和视口位置，浏览器会帮我们处理，性能更优，代码也更易维护。

内容的提问来源于stack exchange，提问作者Sandip Nag