LWC में लोड होने पर पृष्ठ के विशिष्ट भाग पर प्रत्यक्ष
मेरे पास एक समुदाय पृष्ठ का नाम 'वैश्विक-उपकरण' है जिसमें एक 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
, लेकिन मुझे लगता है कि यह किसी भी मुद्दे पर प्रभाव नहीं होना चाहिए।
जवाब
LWCs लोड करते हैं और अतुल्यकालिक रूप से प्रस्तुत करते हैं, फिर भी # खंड पहचानकर्ता पृष्ठ लोड होने के समय लागू किया जाता है। इस प्रकार आपके द्वारा उपयोग किए गए खंड पहचानकर्ता के साथ नामित लंगर उचित समय पर मौजूद नहीं है और ब्राउज़र इसे स्क्रॉल नहीं कर सकता है।
आपको कोड को पूरा करने की आवश्यकता होगी जो पृष्ठ के लोडिंग (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();
}
}