Routing in current page using Hashtag angular 4

Question

I would add Hashtag links in my current page.

I found this answer in this post : Angular2 Routing with Hashtag to page anchor

I tried to use Gunter Answer.

My app structure is like this:

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>

Here's my 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}

  ]),
]

I have tried with 2 component ( presentation and formation ).

When I click on links nothing happens.

Answer 1

You don't need to define route definition for hashtag link. Remove route entries for hashtag/fragment and Try this:

ngOnInit() {

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