在 Angular 中滚动到具有相同 ID 的部分时如何正确定位固定导航栏？

Question

我正在开发一个 Angular 项目，其中一个页面上有多个部分，每个部分都有一个唯一的 ID。我还有一个固定位置的导航栏，允许用户导航到这些部分。我的目标是确保当用户单击菜单项（例如第 2 部分）时，导航栏正确对齐，如下图所示。

为了说明这个问题，我创建了一个 StackBlitz 演示。但是，我必须在 StackBlitz 演示中注释掉以下行

<!-- <app-nav></app-nav> -->

才能使其编译：

Stackblitz 演示

我无法修复编译错误，但这不是我主要关心的问题。我的主要问题是如何正确定位导航栏，使其在滚动到不同部分时按预期运行。

app.routes.ts

export const routes: Routes = [
  { path: 'section-1', component: Section1Component },
  { path: 'section-2', component: Section2Component },
  { path: 'section-3', component: Section3Component },
  { path: 'section-4', component: Section4Component },
  { path: '**', redirectTo: '' },
];

main.ts

  <div class="container">
    <!-- <app-nav></app-nav> -->
    <app-section1></app-section1>
    <app-section2></app-section2>
    <app-section3></app-section3>
    <app-section4></app-section4>
  </div>

nav.component.ts

export class NavComponent {
  constructor(private viewportScroller: ViewportScroller) {}

  public scrollToSection(sectionId: string): void {
    this.viewportScroller.scrollToAnchor(sectionId);
  }
}

Answer 1

尝试在容器外部的末尾添加导航，使其看起来像这样：

<div class="container">
    <app-section1></app-section1>
    <app-section2></app-section2>
    <app-section3></app-section3>
    <app-section4></app-section4>
</div>
<app-nav></app-nav>