使用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(); 
     } 
    }); 
}