Direttamente a una parte specifica della pagina al caricamento in LWC

Aug 18 2020

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 #notifpageper indirizzare alla notifpagesezione della pagina quando la pagina viene caricata. La pagina viene caricata come previsto ma non viene indirizzata a questa sezione.

Nel connectedcallbackmetodo di parentLWC, sto effettuando una chiamata al server per impostare il valore di showchilde para1value, ma penso che questo non dovrebbe avere alcun effetto sul problema.

Risposte

2 PhilW Aug 18 2020 at 13:58

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.

1 devforce Aug 20 2020 at 01:01

Come accennato da @Phil, ora sto usando il renderedCallbackmetodo per verificare se l'URL ha un identificatore di frammento #notifpagee 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();
  } 
}