使用 Hashtag Angular 4 在当前页面中路由

Question

我会在当前页面中添加 Hashtag 链接。

我在这篇文章中找到了这个答案：Angular2 Routing with Hashtag to page anchor

我尝试使用 Gunter Answer。

我的应用结构是这样的：

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