Angular 6：导航到同一页面中的锚点

Question

我正在 Angular 6 中构建一个 Web 应用程序，其中列出了几个应如下所示的组件：

每个部分都应该是一个组件。 导航应该只是滚动到页面中的锚点。 不接受使用 id 作为锚点的目标。

我这样做了：

HTML

      <div class="sidebar" padding>
          <ion-title>{{ section.components }}</ion-title>
          <ion-list *ngFor="let index of section.componentsIndex">
            <a [routerLink]="['']" fragment="{{ index[1] }}">
              <ion-item lines="none">{{ index[0] }}</ion-item>
            </a>
          </ion-list>
...
      </div>
      <div class="containers">
        <doc-table href="#table"></doc-table>
        <doc-tabs href="#tabs"></doc-tabs>
        <doc-textarea href="#textarea"></doc-textarea>
        <doc-textinput href="#textinput"></doc-textinput>
      </div>
        <router-outlet></router-outlet>

我进口的我app.component.ts的AppRoutingModule和路由模块如下所示：

app-routing.module.ts

const routes: Routes = [
  { path: '', component: AppWrapperComponent },
  { path: 'footer', component: FooterComponent },

...];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    useHash: false,
    anchorScrolling: 'enabled',
    scrollPositionRestoration: 'enabled',
    scrollOffset: [0, 50]
  })],
  exports: [RouterModule]
})
export class AppRoutingModule {}

路由正在按预期构建自身。 当我将鼠标悬停在菜单中的链接上时，我会得到例如： localhost:4200/#tabs

一切都像书中一样，但是链接不会滚动到组件的位置。

两天以来，我一直在阅读大量的东西、教程、Angular 文档、Stackoverflow 中的大量帖子等等。 但没有成功。

我没有收到任何错误。

我究竟做错了什么？ 任何帮助将不胜感激