ตรงไปยังส่วนใดส่วนหนึ่งของหน้าที่โหลดใน LWC

Question

ฉันมีชื่อหน้าชุมชน 'อุปกรณ์ทั่วโลก' ซึ่งมีองค์ประกอบ LWC และมี LWC ลูก

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แต่ฉันคิดว่าสิ่งนี้ไม่ควรมีผลกระทบใด ๆ กับปัญหา

Answer 1

LWCs โหลดและแสดงผลแบบอะซิงโครนัส แต่ตัวระบุแฟรกเมนต์ # จะถูกนำไปใช้ในขณะที่โหลดเพจ ดังนั้นสมอที่มีชื่อพร้อมตัวระบุแฟรกเมนต์ที่คุณใช้จึงไม่มีอยู่ในเวลาที่เหมาะสม และเบราว์เซอร์ไม่สามารถเลื่อนไปที่จุดนั้นได้

คุณจะต้องมีโค้ดที่รอการโหลดของหน้า (รวมถึงการแสดงผล LWC) เพื่อให้เสร็จสมบูรณ์ จากนั้นจึงใช้โค้ดบางอย่างที่พบและ "เลื่อนไปที่" องค์ประกอบที่มีชื่อ

Answer 2

ตามที่ @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();
  } 
}