해시 태그 각도 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(); 
     } 
    }); 
}