javascript - Angular 8 应用程序，当使用片段与标题重叠时

Question

我有一个链接，通过单击链接，我想滚动到页面底部的片段。当我点击链接时，片段正在工作，但片段被标题组件重叠。请看图片:

下面是我的 app.component.html 中的代码:

<div class="layout-wrapper">
  <header>
  <app-header></app-header>
</header>  
  <main id="layout-content" [ngClass]="{ active: menuActive }">
    <div>
      <router-outlet></router-outlet>
    </div>
  </main>
  <footer>
  <app-footer></app-footer>
  </footer>
</div>

在主标签上，我有一个 css 样式，顶部有填充

#layout-content {
    margin-left: 0;
    padding-top: 120px;
    margin-right: 0;
  }

但是，当我点击片段链接时，它会将它带到顶部并与标题重叠。

我的链接和片段组件代码:

<a [routerLink]="['/proposal']" fragment="dcn">{{ dcn }}</a>

<section id="dcn">
Some other html here
</section>

为什么不应用填充？如何应用填充？

实际:

预期:

Answer 1

在绞尽脑汁想出一个使用 css 的解决方案之后，我查看了 Angular 路由 api 并找到了解决方案，它正在使用

    scrollOffset: [0, 135] 

在我的 app-routing.module.ts 文件的路由选项中。现在，片段从 135px 开始，这是我的标题的长度。