如何使用角度路由器导航到各个部分？

Question

如何导航到 Angular 2 上 HTML 的特定部分？我想按如下方式导航：

<a href="#first">First section</a></li>
<a href="#second">Second section</a></li>
<a href="#third">Third section</a></li>

<section id="first">
  Content...
</section <section id="second">
Content...
</section>
<section id="third">
  Content...
</section>

但使用 Angular 路由器。

Answer 1

您需要将其添加到您的路由器中

const routerOptions: ExtraOptions = {
    scrollPositionRestoration: 'enabled',
    anchorScrolling: 'enabled',
    scrollOffset: [0, 64],
  };




@NgModule({
    imports: [CommonModule, RouterModule.forRoot(routes, routerOptions)], //ExtraOptions
    ...
  })

你的锚标签应该是这样的

<a 
  [routerLink]="['/yourPageLink', params]" fragment="first}">First section</a>

如需文档，请点击此处