Javascript 角度8应用程序，当使用片段与标题重叠时

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

下面是my 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>

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

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

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

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

预期：
在绞尽脑汁想出一个使用css的解决方案后，我查看了angular routing api并找到了解决方案，它使用

    scrollOffset: [0, 135] 

在我的app-routing.module.ts文件的路由选项中。现在，片段开始于135px之后，这是我的标题的长度。
它是否创建了任何滚动？是的，部分中有内容。事实上，该部分中有一个表，我可以滚动到该表。但是，由于页眉部分重叠，因此不显示表格页眉。我想实现AngularAPI站点中的功能：angular.io/api/common/CommonModule#pipes
    scrollOffset: [0, 135]