Angular 6：在同一页面中导航到Anchor

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>

我将AppRoutingModule导入了我的 app.component.ts 中，路由模块如下所示：

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上的许多文章，等等。但是没有成功。

我没有任何错误。

我在做什么错？任何帮助将不胜感激