Directo a una parte específica de la página en carga en LWC
Tengo un nombre de página de comunidad 'dispositivo global' que tiene un componente LWC y tiene un LWC secundario.
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>
Ahora, cuando llego a esta página, la URL se ve así: s/global-device?linkId=5&mypageid=5003M000001fMQHQA2#notifpage
Estoy usando #notifpage
para dirigir a la notifpage
sección de la página cuando se carga la página. La página se carga como se esperaba, pero no se dirige a esta sección.
En el connectedcallback
método de parentLWC
, estoy haciendo una llamada al servidor para establecer el valor de showchild
y para1value
, pero creo que esto no debería tener ningún efecto sobre el problema.
Respuestas
Las LWC se cargan y renderizan de forma asincrónica, pero el identificador de fragmento # se aplica en el momento en que se carga la página. Por lo tanto, el ancla con nombre con el identificador de fragmento que ha utilizado no existe en el momento adecuado y el navegador no puede desplazarse hasta él.
Debería tener un código que espere a que se complete la carga de la página (incluido el renderizado de LWC) y luego aplicar algún código que encuentre y "se desplace hasta" el elemento nombrado.
Como lo mencionó @Phil, ahora estoy usando el renderedCallback
método para verificar si la URL tiene un identificador de fragmento #notifpage
y luego pasar a esa sección 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();
}
}