Прокрутите до указанного тега c другого компонента

Question

Как переходить от одного компонента к другому нажатием кнопки. Как будто у меня есть панель навигации с «Home», «About», ... в компоненте заголовка

<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>

Теперь, когда я нажимаю кнопку «About» на панели навигации, она должна перейти к компоненту about в домашнем компоненте. Я не знаю, как это сделать. Я пробовал использовать id и href, но это не сработало. Есть какие-нибудь предложения, как это будет работать?

Answer 1

Используйте фрагмент функции angular, чтобы браузер обрабатывал его

    <a routerLink="" fragment="volunteers"> Volunteers                 </a>

Checkout angular fragment

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 и если есть какой-либо идентификатор, вы следует прокрутить его в представление:

constructor(private route: ActivatedRoute) {
    this.route. queryParams.subscribe(params => {
        if (params && params.id) {
            let element = document.getElementById(params.id);
            element && element.scrollIntoView();
        }
    });
}