使用Hashtag角度在當前頁面中路由4

Question

我會在當前頁面中添加Hashtag鏈接。

我發現這個答案在這個帖子：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

您不需要爲hashtag鏈接定義路由定義。刪除的主題標籤/片段路由條目，並試試這個：

ngOnInit() { 

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