ハッシュタグ角度4を使用して現在のページでルーティングする

Question

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

私はこの記事では、この答えを見つけました：Angular2 Routing with Hashtag to page anchor

私はギュンター回答を使用しようとしました。

マイアプリの構造は、このようなものです：

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> 

ここに私のMenuAcceuilCompoenent.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> 

MenuAcceuilComponent.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つのコンポーネント（プレゼンテーションとフォーメーション）を試しました。

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

Answer 1

ハッシュタグリンクのルート定義を定義する必要はありません。ハッシュタグ/フラグメントのルートエントリを削除し、これを試してみてください：

ngOnInit() { 

    this.route.fragment.subscribe(fragment => { 
     if(window.document.getElementById(fragment)) { 
      this.fragment = fragment; 
      window.document.getElementById(this.fragment).scrollIntoView(); 
     } 
    }); 
}