angular - 如何修复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改用。请参阅此答案以获取以这种方式配置您的应用程序的示例。

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();
  }