Angular使用routerLink跳转后无法聚焦指定输入框如何解决

Angular 是单页应用（SPA），routerLink触发的路由跳转不会走浏览器原生的页面加载流程，因此不会自动触发锚点对应的聚焦逻辑：

• 仅用[routerLink]搭配fragment跳转时，只会更新URL上的#锚点参数，不会执行原生的元素聚焦、滚动行为
• 原生href拼接带锚点的地址会触发整页重载，走浏览器原生锚点解析逻辑，虽然能正常聚焦，但完全丢失了SPA无刷新跳转的优势

保留routerLink的无刷新跳转写法，在目标组件内监听路由锚点参数，等视图渲染完成后主动触发输入框聚焦即可。

1. 源页面（Component1）的跳转链接无需修改，保持原有routerLink写法即可：

<a [routerLink]="'first'" fragment="name"> first </a>

2. 目标页面（Component2）的输入框模板代码也无需修改，保留原有模板引用变量#name即可：

<input
  #name
  id="name"
  matInput
  (ngModelChange)="change()"/>

3. 在Component2的Typescript代码中，注入路由服务，等视图初始化完成后匹配锚点参数，主动触发输入框聚焦：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { MatInput } from '@angular/material/input';

@Component({
  selector: 'app-component2',
  templateUrl: './component2.component.html'
})
export class Component2Component implements AfterViewInit {
  // 读取模板中标记为#name的MatInput实例
  @ViewChild('name', { read: MatInput }) nameInput!: MatInput;

  constructor(private route: ActivatedRoute) {}

  ngAfterViewInit(): void {
    // 监听当前路由的fragment（锚点）参数变化
    this.route.fragment.subscribe(fragment => {
      if (fragment === 'name') {
        // 加0延时等变更检测完成，避免DOM未渲染完成导致聚焦失效
        setTimeout(() => {
          this.nameInput.focus();
          // 需要同时滚动到输入框位置可放开下面注释
          // this.nameInput._elementRef.nativeElement.scrollIntoView({ behavior: 'smooth' });
        }, 0);
      }
    });
  }

  change() {
    // 原有业务逻辑保持不变
  }
}

• 由于使用了Angular Material的matInput指令，必须调用MatInput实例暴露的focus()方法，直接操作原生DOM元素触发focus不会同步Material输入框的聚焦样式。
• 如果仅需要实现锚点自动滚动、不需要聚焦输入框，可以直接在根模块的路由配置中开启全局锚点滚动，无需写额外组件逻辑：

// app-routing.module.ts 中配置
@NgModule({
  imports: [RouterModule.forRoot(routes, {
    anchorScrolling: 'enabled', // 开启路由跳转后自动滚动到锚点位置
    scrollOffset: [0, 64] // 存在固定顶部导航时可配置滚动偏移量，避免元素被导航遮挡
  })],
  exports: [RouterModule]
})
export class AppRoutingModule {}

注意：全局anchorScrolling配置仅处理滚动逻辑，不会自动聚焦表单类交互元素，输入框聚焦场景仍需使用上述主动调用focus的方案实现。

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