滚动到另一个组件的特定标签

Question

如何通过单击按钮从一个组件导航到另一个组件。就像我在标题组件中有一个带有“主页”、“关于”...的导航栏

<li><a class="text-white" href="#home">Home</a></li>

<li><a class="text-white" href="#about">About</a></li>

<li><a class="text-white" href="#jobs">Opportunities</a></li>

<li><a class="text-white" href="#volunteers">Volunteers</a></li>

<li><a class="text-white" href="#donors">Donors</a></li>

<li><a class="text-white" routerLink="/contact">Contact</a></li>

还有一个像这样叫做 home 的组件

<section id="home">

  <app-home-component></app-home-component>

</section>

<section id="about">

  <app-about></app-about>

</section>

<section id="jobs">

  <app-jobs></app-jobs>

</section>

<section id="volunteers">

  <app-volunteers></app-volunteers>

</section>

<section id="donors">

  <app-donors></app-donors>

</section>

现在，当我单击导航栏中的关于按钮时，它应该滑动到主页组件中的关于组件。我不知道该怎么做。我尝试使用 id 和 href 但它没有用。那么有什么建议吗？

Answer 1

使用角度特征片段让浏览器处理它&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;routerLink=""&nbsp;fragment="volunteers">&nbsp;Volunteers&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>结帐角度片段

Answer 2

在标头组件中，将 queryParams 添加到链接中：<li><a class="text-white" [routerLink]="['/home']" [queryParams]="{id: 'home'}">Home</a></li><li><a class="text-white" [routerLink]="['/home']" [queryParams]="{id: 'about'}">About</a></li>在home组件中检查 queryParams 的路由，如果有任何 id，你应该将它滚动到视图中：constructor(private route: ActivatedRoute) {&nbsp; &nbsp; this.route. queryParams.subscribe(params => {&nbsp; &nbsp; &nbsp; &nbsp; if (params && params.id) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let element = document.getElementById(params.id);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element && element.scrollIntoView();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });}