永远在线的导航栏和路由器出口，具有滚动到ID的支持？

Question

这些年来，我使用了许多技巧性的技巧来使其工作：

<app-navbar></app-navbar>
<router-outlet></router-outlet>

---

第一个解决方案是使用Angular Material：

<app-navbar></app-navbar>
<div style="padding-top: 55px">
    <router-outlet></router-outlet>
</div>

哪个会中断所有滚动到ID的解决方案，包括：

scrollToId(id: string) {
    const e = document.getElementById(id.startsWith('#') ? id.substring(1) : id);
    if (e != null)
      e.scrollIntoView({ behavior: 'smooth' });
}

和https://www.npmjs.com/package/ngx-page-scroll

---

其他解决方案是使用Bootstrap：

<header [ngStyle]="getBottom()">
  <app-navbar></app-navbar>
</header>

<div class="container" style="margin-left: 0">
  <router-outlet></router-outlet>
</div>

getBottom()的实现方式为：

getBottom() {
  return { 'margin-bottom':
`${this.alertsService.alerts.length ? this.alertsService.alerts.length * 6 : 6}em`}
}