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

Question

在主页组件上，我使用滚动以显示页面的不同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的hrefs的router.ts配置有关：

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

关于如何解决错误的任何想法？谢谢！

Answer 1

似乎您的Angular代码正在使用HashLocationStrategy，这干扰了浏览器的自然行为，使其无法遵循哈希段并移至视口中的适当元素。

一种方法是改用PathLocationStrategy。请参见PathLocationStrategy来以这种方式配置您的应用的示例。