Directo a una parte específica de la página en carga en LWC

Aug 18 2020

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 #notifpagepara dirigir a la notifpagesecció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 connectedcallbackmétodo de parentLWC, estoy haciendo una llamada al servidor para establecer el valor de showchildy para1value, pero creo que esto no debería tener ningún efecto sobre el problema.

Respuestas

2 PhilW Aug 18 2020 at 13:58

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.

1 devforce Aug 20 2020 at 01:01

Como lo mencionó @Phil, ahora estoy usando el renderedCallbackmétodo para verificar si la URL tiene un identificador de fragmento #notifpagey 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();
  } 
}