Angular：组件可见时调用方法的解决方案

方案1：用IntersectionObserver监听组件可见性 #

这是现代浏览器支持的精准检测方案，能判断元素是否进入视口（真正可见）。

1. 在组件类中声明观察者实例：

private observer: IntersectionObserver | undefined;

2. 在ngAfterViewInit中初始化并监听组件根元素：

ngAfterViewInit(): void {
  this.observer = new IntersectionObserver(entries => {
    const [entry] = entries;
    if (entry.isIntersecting) {
      this.methodToBeCalled();
      // 若只需调用一次，可取消监听避免重复触发
      this.observer?.unobserve(entry.target);
    }
  });
  // 监听组件宿主元素，需先给组件根节点加模板引用变量
  this.observer.observe(this.componentRoot.nativeElement);
}

3. 组件模板添加模板引用变量：

<div #componentRoot>
  <!-- 组件内容 -->
</div>

4. 组件销毁时清理观察者，防止内存泄漏：

ngOnDestroy(): void {
  this.observer?.disconnect();
}

方案2：路由级组件结合路由事件判断 #

如果组件是路由页面，可通过路由事件判断当前路由是否激活（组件可见）：

import { Router, NavigationEnd } from '@angular/router';
import { filter, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

private destroy$ = new Subject<void>();

constructor(private router: Router) {}

ngOnInit(): void {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd),
    takeUntil(this.destroy$)
  ).subscribe(() => {
    // 替换为组件对应的路由路径
    if (this.router.url === '/target-route') {
      this.methodToBeCalled();
    }
  });
}

ngOnDestroy(): void {
  this.destroy$.next();
  this.destroy$.complete();
}

方案3：*ngIf控制组件渲染（条件显示场景） #

如果组件是通过*ngIf控制显示的，ngAfterViewInit只会在组件真正渲染（可见）时触发，原代码直接生效：

<app-your-component *ngIf="isComponentVisible"></app-your-component>

注意：若组件是通过CSS的display: none/visibility: hidden隐藏，DOM已存在，ngAfterViewInit仍会触发，此时需用方案1的IntersectionObserver检测实际可见性。

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