LWC에서로드시 페이지의 특정 부분으로 직접 이동

Aug 18 2020

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있지만 이것이 문제에 영향을 미치지 않아야한다고 생각합니다.

답변

2 PhilW Aug 18 2020 at 13:58

LWC는 비동기 적으로로드 및 렌더링되지만 # 조각 식별자는 페이지가로드 될 때 적용됩니다. 따라서 사용한 조각 식별자가있는 명명 된 앵커가 적절한 시간에 존재하지 않으며 브라우저가 해당 위치로 스크롤 할 수 없습니다.

페이지의로드 (LWC 렌더링 포함)가 완료 될 때까지 대기하는 코드가 있어야하며 명명 된 요소를 찾아 "스크롤"하는 일부 코드를 적용해야합니다.

1 devforce Aug 20 2020 at 01:01

@Phil에서 언급했듯이 renderedCallbackURL에 조각 식별자가 있는지 확인한 #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();
  } 
}