Angular @defer块如何实现组件出视口时自动销毁？

Angular 17+ 原生的@defer块本身不支持自动销毁已加载的组件——它的设计是满足触发条件后加载并保留组件实例，没有内置的“离开视口即销毁”逻辑。但可以结合Angular原生特性或官方工具实现你的需求，以下是两种可行方案：

方案1：手动结合 IntersectionObserver + @if 控制组件生命周期 #

利用浏览器原生的IntersectionObserver监听容器可见性，配合@if指令动态创建/销毁组件，同时保留@defer的懒加载能力：

模板代码 #

@for (item of items; track item.id) {
  <div #container 
       [style.height.px]="500"
       [attr.data-item-id]="item.id">
    @defer (on viewport(container)) {
      @if (visibleItems.has(item.id)) {
        <app-item [item]="item" />
      }
    } @placeholder {
      <div style="height: 500px;"></div>
    }
  </div>
}

组件类逻辑 #

import { AfterViewInit, ElementRef, QueryList, ViewChildren, OnDestroy } from '@angular/core';

export class YourComponent implements AfterViewInit, OnDestroy {
  @ViewChildren('container') containers!: QueryList<ElementRef<HTMLDivElement>>;
  visibleItems = new Set<string>();
  private observer!: IntersectionObserver;

  ngAfterViewInit() {
    // 初始化交叉观察者，监听元素可见性变化
    this.observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        const itemId = entry.target.getAttribute('data-item-id');
        if (!itemId) return;

        entry.isIntersecting 
          ? this.visibleItems.add(itemId) 
          : this.visibleItems.delete(itemId);
      });
    }, { threshold: 0.1 });

    // 监听所有容器元素
    this.containers.forEach(container => {
      this.observer.observe(container.nativeElement);
    });

    // 处理items数组更新时的容器列表变化
    this.containers.changes.subscribe(() => {
      this.containers.forEach(container => {
        this.observer.observe(container.nativeElement);
      });
    });
  }

  ngOnDestroy() {
    this.observer.disconnect();
  }
}

方案2：使用Angular CDK虚拟滚动（推荐） #

Angular CDK的CdkVirtualScrollViewport是官方原生的虚拟滚动解决方案，会自动渲染视口内的组件、销毁视口外的组件，同时可结合@defer实现组件懒加载，完全适配大量重型组件场景。

步骤1：安装并导入CDK模块 #

npm install @angular/cdk

在你的模块中导入滚动模块：

import { ScrollingModule } from '@angular/cdk/scrolling';

@NgModule({
  imports: [ScrollingModule]
})
export class YourModule {}

步骤2：模板与组件实现 #

<cdk-virtual-scroll-viewport 
  itemSize="500" 
  class="virtual-viewport">
  <ng-container *cdkVirtualFor="let item of items; trackBy: trackItemById">
    @defer (on immediate) {
      <app-item [item]="item" />
    } @placeholder {
      <div style="height: 500px;"></div>
    }
  </ng-container>
</cdk-virtual-scroll-viewport>

组件类逻辑：

export class YourComponent {
  trackItemById(index: number, item: any): string {
    return item.id;
  }
}

添加基础样式：

.virtual-viewport {
  height: 100vh; /* 设置虚拟视口的高度 */
  overflow-y: auto;
}

方案优势 #

• 官方维护的原生方案，完全适配Angular生态
• 自动处理视口内组件渲染与销毁，无需手动编写监听逻辑
• 支持滚动缓冲区域、自定义滚动行为等性能优化特性

关键说明 #

@defer的on viewport触发后会加载并保留组件实例，即使组件离开视口也不会自动销毁。因此要实现“仅在视口内渲染”的效果，必须通过@if指令或虚拟滚动组件来控制组件的存在状态。

内容的提问来源于stack exchange，提问作者Eduardo Rosostolato