angular - 如何使用 Angular 路由器导航到部分？

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
    ...
  })

你的 anchor 标签应该是这样的

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

对于文档点击here