Angular应用中使用target selector时如何避免href绑定影响URL引发404？

你可以通过以下几种方式实现页面内定位，同时避免URL变化或404错误：

方法一：手动阻止默认跳转+原生滚动 #

直接通过点击事件阻止a标签的默认跳转行为，然后手动定位到目标元素：

1. 模板中修改菜单链接：

<a (click)="scrollToTarget($event, 'your-target-id')">你的菜单选项</a>
<!-- 目标元素 -->
<div id="your-target-id">需要定位的内容</div>

2. 组件中添加滚动方法：

scrollToTarget(event: Event, targetId: string): void {
  // 阻止默认跳转行为
  event.preventDefault();
  // 查找目标元素
  const targetEl = document.getElementById(targetId);
  if (targetEl) {
    // 平滑滚动到目标元素，可根据需求调整配置
    targetEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
}

方法二：利用Angular路由Fragment（允许URL带锚点但无404） #

如果可以接受URL末尾带锚点（如/#your-target-id），可以用Angular路由的fragment功能，同时配置路由实现自动滚动：

1. 配置路由模块：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [/* 你的路由配置 */];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    // 开启滚动位置恢复
    scrollPositionRestoration: 'enabled',
    // 开启锚点滚动
    anchorScrolling: 'enabled'
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 模板中使用routerLink和fragment：

<!-- 跳转到当前路由的指定锚点 -->
<a routerLink="/" fragment="your-target-id">你的菜单选项</a>
<div id="your-target-id">需要定位的内容</div>

方法三：使用Angular CDK的ViewportScroller服务 #

借助Angular CDK的滚动服务实现更优雅的页面内定位：

1. 先导入ScrollingModule到你的模块：

import { ScrollingModule } from '@angular/cdk/scrolling';

@NgModule({
  imports: [/* 其他模块 */, ScrollingModule]
})
export class YourModule { }

2. 组件中注入并使用ViewportScroller：

import { ViewportScroller } from '@angular/common';
import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  constructor(private viewportScroller: ViewportScroller) {}

  scrollToTarget(targetId: string): void {
    // 滚动到指定锚点
    this.viewportScroller.scrollToAnchor(targetId);
  }
}

3. 模板中绑定点击事件并阻止默认跳转：

<a (click)="scrollToTarget('your-target-id'); $event.preventDefault()">你的菜单选项</a>
<div id="your-target-id">需要定位的内容</div>

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