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

我会在当前页面中添加标签链接

我在这篇文章中找到了这个答案：

我试着用冈特的回答

我的应用程序结构如下：

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>

ModuleApps.ts

imports: [
RouterModule.forRoot([
  { path: "#presentation", component: SlidePresentationComponent},
  { path: "#formation", component: FormationComponent}

  ]),
]

我尝试了两个组件的演示和形成

---

当我点击链接时，什么都不会发生。

您不需要为标签链接定义路由定义。删除hashtag/fragment的路由条目并尝试以下操作：

ngOnInit() {

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

我收到以下错误：异常：未能对“文档”执行“querySelector”：不是有效的选择器。

imports: [
RouterModule.forRoot([
  { path: "#presentation", component: SlidePresentationComponent},
  { path: "#formation", component: FormationComponent}

  ]),
]

ngOnInit() {

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