如何在Angular页面聚焦指定HTML组件及实现锚点滚动定位

嘿，这两个需求在Angular开发里挺常见的，我整理了几个靠谱的实现方案，你可以参考下：

Angular不推荐直接操作DOM，所以我们通常用框架提供的API来安全获取元素引用并触发聚焦，主要有两种常用方式：

方法1：ViewChild + nativeElement.focus() #

这是最直观的方案，步骤很简单：

1. 在模板里给目标元素加个模板引用变量（比如#usernameInput）：

<input #usernameInput type="text" placeholder="请输入用户名">
<button (click)="focusOnInput()">点击聚焦输入框</button>

2. 在组件类中通过ViewChild获取元素引用，然后调用原生的focus()方法：

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

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html'
})
export class UserFormComponent {
  // 获取模板引用对应的DOM元素
  @ViewChild('usernameInput') usernameInput!: ElementRef<HTMLInputElement>;

  focusOnInput() {
    // 用setTimeout确保元素已完成渲染（如果是初始化时聚焦，建议放在ngAfterViewInit钩子中）
    setTimeout(() => {
      this.usernameInput.nativeElement.focus();
    }, 0);
  }
}

小提示：如果是页面加载后自动聚焦，直接把聚焦逻辑写在ngAfterViewInit生命周期钩子中，不需要setTimeout哦。

方法2：使用Renderer2（更符合Angular规范的DOM操作） #

如果你不想直接碰nativeElement，可以用Angular提供的Renderer2来处理，它会帮我们兼容不同环境的DOM操作：

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

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html'
})
export class UserFormComponent implements AfterViewInit {
  @ViewChild('usernameInput') usernameInput!: ElementRef<HTMLInputElement>;

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit() {
    // 通过Renderer2获取元素并触发聚焦
    this.renderer.selectRootElement(this.usernameInput.nativeElement).focus();
  }
}

Angular默认会把锚点链接当成路由跳转，所以我们需要阻止默认行为，再手动实现滚动效果：

场景1：滚动到指定元素位置 #

方案A：原生锚点 + 阻止路由跳转 #

给目标元素设置id，然后在锚点上绑定点击事件阻止默认行为，再触发滚动：

<!-- 目标滚动区域 -->
<div #targetArea id="target-area">这里是你要滚动到的内容区域</div>

<!-- 锚点按钮 -->
<a href="#target-area" (click)="scrollToTarget($event)">滚动到目标区域</a>

组件类中的处理方法：

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

@Component({
  selector: 'app-scroll-demo',
  templateUrl: './scroll-demo.component.html'
})
export class ScrollDemoComponent {
  @ViewChild('targetArea') targetArea!: ElementRef<HTMLDivElement>;

  scrollToTarget(event: Event) {
    // 阻止Angular默认的路由跳转行为
    event.preventDefault();
    // 平滑滚动到目标元素，还可以设置滚动对齐方式
    this.targetArea.nativeElement.scrollIntoView({
      behavior: 'smooth',
      block: 'start' // 可选值：'center'/'end'，控制元素在视口的位置
    });
  }
}

方案B：直接用模板引用变量（无需id） #

如果不想给元素加id，直接用模板引用变量也能实现：

<div #targetArea>这里是你要滚动到的内容区域</div>
<button (click)="scrollToTarget()">滚动到目标区域</button>

组件类方法和上面类似，去掉event参数即可。

场景2：向下翻页（滚动一屏高度） #

如果需要点击后直接滚动一整页的高度，可以用window.scrollBy()方法：

<button (click)="scrollDownPage()">向下翻页</button>

组件类方法：

scrollDownPage() {
  // 获取当前窗口的可视高度
  const pageHeight = window.innerHeight;
  // 平滑滚动一屏高度
  window.scrollBy({
    top: pageHeight,
    behavior: 'smooth'
  });
}

小技巧：如果要向上翻页，把top的值改成-pageHeight就可以啦。

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