如何使用角度路由器導航到各個部分？

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>

文檔請點擊這里