Angular中的经典锚点方法（id-href）如何修复？

Question

在主页组件上，我使用滚动来显示页面的不同 div。 div 看起来像这样：

<div id="paragraph1">Paragraph1</div>
<div id="paragraph2">Paragraph2</div>
<div id="paragraph3">Paragraph3</div>

在同一页面上，我有一个菜单组件，它将菜单按钮链接到相应的 div:

<ul>
   <li><a href="#paragraph1">Paragraph1</a></li>
   <li><a href="#paragraph2">Paragraph2</a></li>
   <li><a href="#paragraph3">Paragraph3</a></li>
</ul>

它似乎工作正常：单击菜单按钮将我带到页面中相应的 div 开始，但它同时抛出控制台错误：

ERROR Error: "Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'paragraph1'

我认为它与不包含 div 的 href 的 router.ts 配置有关：

export const routes: Array<Route> = [
{ path: '/home', component: HomeComponent}];

有什么办法可以解决这个错误吗？谢谢！

Answer 1

您的 Angular 代码似乎正在使用 HashLocationStrategy，这会干扰浏览器遵循散列段并移动到视口中适当元素的自然行为。

一种方法是使用 PathLocationStrategy instead. Please see 作为示例，以这种方式配置您的应用程序。

Answer 2

你可以试试下面的方法

<div #paragraph1>Paragraph1</div>
<div #paragraph2>Paragraph2</div>
<div #paragraph3>Paragraph3</div>

<ul>
   <li><a href="javascript:void(0)" (click)="scroll(paragraph1)">Paragraph1</a></li>
   <li><a href="javascript:void(0)" (click)="scroll(paragraph2)">Paragraph2</a></li>
   <li><a href="javascript:void(0)" (click)="scroll(paragraph2)">Paragraph3</a></li>
</ul>

  scroll(el: HTMLElement) {
    el.scrollIntoView();
  }

Angular中的经典锚点方法（id-href）如何修复？

How to fix the classic anchor method (id-href) in Angular?

angular

hash

routes

hashref