버튼 클릭으로 한 구성 요소에서 다른 구성 요소로 이동하는 방법. 헤더 구성 요소에 "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>
그리고 이와 같은 홈이라는 또 다른 구성 요소가 있습니다.
<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를 사용해 보았지만 작동하지 않았습니다. 어떻게 작동할지 제안이 있습니까?
에서 헤더 구성 요소의 링크에 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>
에 홈 구성 요소 queryParams에 대한 경로를 확인하고 ID가있을 경우에는보기로 스크롤해야합니다 :
constructor(private route: ActivatedRoute) {
this.route. queryParams.subscribe(params => {
if (params && params.id) {
let element = document.getElementById(params.id);
element && element.scrollIntoView();
}
});
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다