LWC에서로드시 페이지의 특정 부분으로 직접 이동
LWC 구성 요소가 있고 하위 LWC가있는 커뮤니티 페이지 이름 'global-device'가 있습니다.
parentLWC.html
<template>
....
<!--parent html code-->
<div id="messagenotif">
<a name="notifpage"></a>
<template if:true={showChild}>
<c-child-lwc para1={para1value}></c-child-lwc>
</template>
</div>
</template>
이제이 페이지를 방문하면 URL은 다음과 같습니다. s/global-device?linkId=5&mypageid=5003M000001fMQHQA2#notifpage
페이지가로드 될 때 페이지 섹션으로 이동하는 #notifpage
데 사용 하고 notifpage
있습니다. 페이지가 예상대로로드되지만이 섹션으로 이동하지 않습니다.
의 connectedcallback
방법 에서는 및 parentLWC
값을 설정하기 위해 서버 호출을 수행 showchild
하고 para1value
있지만 이것이 문제에 영향을 미치지 않아야한다고 생각합니다.
답변
LWC는 비동기 적으로로드 및 렌더링되지만 # 조각 식별자는 페이지가로드 될 때 적용됩니다. 따라서 사용한 조각 식별자가있는 명명 된 앵커가 적절한 시간에 존재하지 않으며 브라우저가 해당 위치로 스크롤 할 수 없습니다.
페이지의로드 (LWC 렌더링 포함)가 완료 될 때까지 대기하는 코드가 있어야하며 명명 된 요소를 찾아 "스크롤"하는 일부 코드를 적용해야합니다.
@Phil에서 언급했듯이 renderedCallback
URL에 조각 식별자가 있는지 확인한 #notifpage
다음을 사용하여 해당 섹션으로 이동하는 방법을 사용하고 scrollIntoView
있습니다.
ParentLWC.html
<template>
....
<!--parent html code-->
<div class="notifpage">
<template if:true={showChild}>
<c-child-lwc para1={para1value}></c-child-lwc>
</template>
</div>
</template>
'parentLWC.js'
renderedCallback(){
if(location.href.includes('#notifpage') ){
var elmnt = this.template.querySelector('.notifpage');
elmnt.scrollIntoView();
}
}