Angular2中scrollIntoView()失效求助：含*ngIf组件及应用选择器场景

碰到这种情况太常见了！我来给你拆解下问题原因和对应的解决办法：

问题根源 #

1. 带*ngIf的组件：*ngIf是条件渲染指令，只有当条件为true时，元素才会被添加到DOM中。你直接调用document.querySelector时，元素可能还没完成渲染，自然找不到或者无法触发滚动。
2. 应用根组件选择器：Angular默认启用视图封装（Emulated），会给组件元素添加专属的属性标记（比如_ngcontent-xxx），原生的document.querySelector可能因为生命周期时机问题，无法准确获取到组件元素；另外如果根组件还没完成初始化，DOM元素也未就绪。
3. 直接操作原生DOM不符合Angular的变更检测机制，容易出现异步渲染导致的元素未就绪问题。

正确实现方式 #

推荐使用Angular原生的ViewChild/ViewChildren来获取元素，结合组件生命周期或异步等待来确保元素就绪后再执行滚动。

方案1：处理*ngIf动态渲染的情况 #

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

@Component({
  selector: 'app-root',
  template: `
    <button (click)="scrollToApp3()">滚动到App3</button>
    <!-- 给目标组件添加模板引用变量 -->
    <app-app3 #targetApp *ngIf="showApp3"></app-app3>
  `
})
export class AppComponent {
  showApp3 = false;
  // static: false 确保在变更检测后获取元素
  @ViewChild('targetApp', { static: false }) targetApp!: ElementRef;

  scrollToApp3() {
    // 先触发*ngIf渲染元素
    this.showApp3 = true;
    // 等待Angular完成变更检测和DOM渲染
    setTimeout(() => {
      if (this.targetApp) {
        this.targetApp.nativeElement.scrollIntoView({
          behavior: 'smooth', // 平滑滚动
          block: 'start' // 滚动到元素顶部
        });
      }
    }, 0);
  }
}

方案2：处理根组件选择器的情况 #

如果目标是根组件（比如<app-app1>），同样用ViewChild获取，确保组件初始化完成后再滚动：

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

@Component({
  selector: 'app-root',
  template: `
    <button (click)="scrollToApp1()">滚动到App1</button>
    <app-app1 #rootApp></app-app1>
  `
})
export class AppComponent implements AfterViewInit {
  @ViewChild('rootApp', { static: true }) rootApp!: ElementRef;

  ngAfterViewInit() {
    // 组件初始化完成后，根元素已就绪
  }

  scrollToApp1() {
    this.rootApp.nativeElement.scrollIntoView({ behavior: 'smooth' });
  }
}

方案3：更优雅的异步等待（使用rxjs） #

如果不想用setTimeout，可以结合rxjs的timer来等待变更检测完成：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { timer } from 'rxjs';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="scrollToTarget()">滚动</button>
    <app-app3 #target *ngIf="isVisible"></app-app3>
  `
})
export class AppComponent {
  isVisible = false;
  @ViewChild('target', { static: false }) target!: ElementRef;

  scrollToTarget() {
    this.isVisible = true;
    // 等待0秒，触发Angular变更检测
    timer(0).subscribe(() => {
      this.target.nativeElement.scrollIntoView({ behavior: 'smooth' });
    });
  }
}

关键注意点 #

• 避免直接使用document.querySelector，Angular的视图封装和生命周期可能导致元素未就绪。
• 对于*ngIf的元素，必须等待变更检测完成后再执行滚动操作。
• 使用ViewChild时，根据场景设置static属性：static: true适用于初始化时就存在的元素；static: false适用于动态渲染（如*ngIf）的元素。

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