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

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

使用角度特征片段让浏览器处理它

    <a routerLink="" fragment="volunteers"> Volunteers                 </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) {

    this.route. queryParams.subscribe(params => {

        if (params && params.id) {

            let element = document.getElementById(params.id);

            element && element.scrollIntoView();

        }

    });

}