Angular是否有类似ngIf的指令，在元素可见时加载模板？

一、Angular官方内置方案说明 #

Angular本身没有提供直接对标*ngIf、仅在元素进入视口时才渲染模板的内置指令。虚拟滚动（如@angular/cdk/scrolling里的CdkVirtualScrollViewport）是官方推荐的长列表优化方案，但如果你需要更灵活的、针对单个元素的视口触发渲染逻辑，自定义指令是最合适的选择。

二、自定义视口渲染指令实现 #

下面是一个完整的自定义指令实现，核心利用IntersectionObserver API监听元素是否进入视口，满足条件时渲染模板：

1. 创建指令文件（如in-view-render.directive.ts） #

import { Directive, Input, TemplateRef, ViewContainerRef, OnDestroy } from '@angular/core';

@Directive({
  selector: '[inViewRender]'
})
export class InViewRenderDirective implements OnDestroy {
  private observer: IntersectionObserver | null = null;
  private hasRendered = false;

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}

  @Input() set inViewRender(options: IntersectionObserverInit = {}) {
    // 避免重复初始化
    if (this.observer) {
      this.observer.disconnect();
    }

    // 配置IntersectionObserver
    this.observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting && !this.hasRendered) {
          // 元素进入视口，渲染模板
          this.viewContainer.createEmbeddedView(this.templateRef);
          this.hasRendered = true;
          // 渲染完成后停止监听，节省性能
          this.observer?.disconnect();
        }
      });
    }, options);

    // 监听指令所在的宿主元素
    this.observer.observe(this.viewContainer.element.nativeElement);
  }

  ngOnDestroy(): void {
    // 组件销毁时清理监听，防止内存泄漏
    this.observer?.disconnect();
  }
}

2. 在模块中声明指令 #

在你的Angular模块（如AppModule）中导入并声明该指令：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { InViewRenderDirective } from './in-view-render.directive';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    InViewRenderDirective
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 在模板中使用 #

用法和*ngIf类似，还可以传入IntersectionObserver的配置选项调整触发条件：

<!-- 基础用法：元素进入视口时渲染内容 -->
<div *inViewRender>
  这部分内容只会在元素进入视口后才渲染
</div>

<!-- 自定义配置：元素进入视口50%时触发 -->
<div *inViewRender="{ threshold: 0.5 }">
  当该元素50%进入视口时才渲染
</div>

三、注意事项 #

• 该指令默认只会渲染一次，若需要元素离开视口后销毁模板、再次进入时重新渲染，可去掉this.hasRendered的判断逻辑，但要注意频繁渲染可能影响性能。
• IntersectionObserver是现代浏览器支持的API，如需兼容旧浏览器（如IE11），需要引入对应的polyfill。

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