LWC में लोड होने पर पृष्ठ के विशिष्ट भाग पर प्रत्यक्ष

Aug 18 2020

मेरे पास एक समुदाय पृष्ठ का नाम 'वैश्विक-उपकरण' है जिसमें एक 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, लेकिन मुझे लगता है कि यह किसी भी मुद्दे पर प्रभाव नहीं होना चाहिए।

जवाब

2 PhilW Aug 18 2020 at 13:58

LWCs लोड करते हैं और अतुल्यकालिक रूप से प्रस्तुत करते हैं, फिर भी # खंड पहचानकर्ता पृष्ठ लोड होने के समय लागू किया जाता है। इस प्रकार आपके द्वारा उपयोग किए गए खंड पहचानकर्ता के साथ नामित लंगर उचित समय पर मौजूद नहीं है और ब्राउज़र इसे स्क्रॉल नहीं कर सकता है।

आपको कोड को पूरा करने की आवश्यकता होगी जो पृष्ठ के लोडिंग (LWC रेंडरिंग सहित) को पूरा करने के लिए प्रतीक्षा करता है और फिर कुछ कोड लागू करता है जो नामित तत्व को "स्क्रॉल" करता है।

1 devforce Aug 20 2020 at 01:01

जैसा कि @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();
  } 
}