Direto para parte específica da página ao carregar no LWC

Question

Tenho uma página de comunidade chamada 'dispositivo global' que possui um componente LWC e um LWC filho.

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>

Agora, quando chego a esta página, o URL se parece com isto: s/global-device?linkId=5&mypageid=5003M000001fMQHQA2#notifpage

Estou usando #notifpagepara direcionar para a notifpageseção da página quando ela carrega. A página é carregada conforme o esperado, mas não é direcionada para esta seção.

No connectedcallbackmétodo de parentLWC, estou fazendo uma chamada de servidor para definir o valor de showchilde para1value, mas acho que isso não deve afetar o problema.

Answer 1

Os LWCs são carregados e renderizados de maneira assíncrona, embora o # identificador de fragmento seja aplicado no momento em que a página é carregada. Portanto, a âncora nomeada com o identificador de fragmento que você usou não existe no momento apropriado e o navegador não pode rolar até ela.

Você precisaria ter um código que aguarde o carregamento da página (incluindo a renderização LWC) para ser concluído e, em seguida, aplicar algum código que encontre e "role para" o elemento nomeado.

Answer 2

Conforme mencionado por @Phil, agora estou usando o renderedCallbackmétodo para verificar se a URL tem identificador de fragmento #notifpagee, em seguida , vou para essa seção 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();
  } 
}