angular - ハッシュタグAngular 4を使用した現在のページでのルーティング

Question

現在のページにハッシュタグ リンクを追加します。

私はこの投稿でこの答えを見つけました: Angular2 Routing with Hashtag to page anchor

Gunter Answer を使ってみました。

私のアプリの構造は次のようなものです:

ComponentApp.html

<div class="menu-wrapper">

  <app-menu-accueil> //Here the menu

  </app-menu-accueil>
</div>
<div class="container">

  <div class="innercontainer">
    <app-slide-presentation id="presentation"> // Target 1
    </app-slide-presentation>
  </div>
  <div class="innercontainer">
    <app-formation id="formation">// target 2
    </app-formation>
  </div>
  <div class="innercontainer"> //Target 3
    <app-competences1 id="competences">
    </app-competences1>
  </div>
  <div class="innercontainer">
    <app-experiences id="experiences"> //Target 4
    </app-experiences>
  </div>
  <div class="innercontainer">
    <app-contact id="contact"> //Target 5
    </app-contact>
  </div>

</div>

これが私のMenuAceuilCompoenent.htmlです

<md-toolbar color="primary" id="menu-wrapper">

  <button md-button fxHide="false" fxHide.gt-sm [mdMenuTriggerFor]="menu" class="wrapped">
                <md-icon>menu</md-icon>
        </button>
  <md-menu #menu="mdMenu" class="my-full-width-menu">
    <a [routerLink]="['']" fragment="presentation">  <button md-menu-item >
            <md-icon>fingerprint</md-icon>

          </button> </a>
    <a [routerLink]="['#formation']" fragment="Test"><button md-menu-item >
            <md-icon>school</md-icon>

</button>
</a>
    <a href="#Competences"><button md-menu-item>
            <md-icon>fitness_center</md-icon>

</button>
</a>
    <a href="#Experiences"><button md-menu-item>
            <md-icon>business_center</md-icon>

</button>
</a>
    <a href="#Contact"><button md-menu-item>
            <md-icon>send</md-icon>

</button>
</a>
  </md-menu>

</md-toolbar>

MenuAceuilComponent.ts

import { Component, OnInit } from '@angular/core';
import { MdToolbarModule } from '@angular/material';
import { MnFullpageOptions, MnFullpageService } from 'ngx-fullpage';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-menu-accueil',
  templateUrl: './menu-accueil.component.html',
  styleUrls: ['./menu-accueil.component.css'],
  encapsulation: ViewEncapsulation.None

})
export class MenuAccueilComponent implements OnInit {

  constructor(private route: ActivatedRoute) { }
  private fragment: string;

  ngOnInit() {

    this.route.fragment.subscribe(fragment => { this.fragment = fragment; });
  }

  ngAfterViewInit(): void {
    try {
      document.querySelector('#' + this.fragment).scrollIntoView();
    } catch (e) { }
  }
}

ModuleApps.ts

imports: [
RouterModule.forRoot([
  { path: "#presentation", component: SlidePresentationComponent},
  { path: "#formation", component: FormationComponent}

  ]),
]

2つのコンポーネント（プレゼンテーションとフォーメーション）で試しました。

リンクをクリックしても何も起こりません。