Direttamente a una parte specifica della pagina al caricamento in LWC
Ho un nome di pagina della comunità "dispositivo globale" che ha un componente LWC e ha un LWC figlio.
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>
Ora, quando arrivo su questa pagina, l'URL ha questo aspetto: s/global-device?linkId=5&mypageid=5003M000001fMQHQA2#notifpage
Sto usando #notifpage
per indirizzare alla notifpage
sezione della pagina quando la pagina viene caricata. La pagina viene caricata come previsto ma non viene indirizzata a questa sezione.
Nel connectedcallback
metodo di parentLWC
, sto effettuando una chiamata al server per impostare il valore di showchild
e para1value
, ma penso che questo non dovrebbe avere alcun effetto sul problema.
Risposte
Gli LWC vengono caricati e visualizzati in modo asincrono, tuttavia l'identificatore di frammento # viene applicato al momento del caricamento della pagina. Quindi l'ancora con nome con l'identificatore di frammento che hai usato non esiste al momento opportuno e il browser non può scorrere fino ad essa.
Avresti bisogno di codice che attende il caricamento della pagina (incluso il rendering LWC) per completare e quindi applicare un codice che trova e "scorre" l'elemento nominato.
Come accennato da @Phil, ora sto usando il renderedCallback
metodo per verificare se l'URL ha un identificatore di frammento #notifpage
e quindi passare a quella sezione usando 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();
}
}