Direct vers une partie spécifique de la page lors du chargement dans LWC

Aug 18 2020

J'ai un nom de page de communauté 'global-device' qui a un composant LWC et il a un enfant LWC.

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>

Maintenant, lorsque j'arrive sur cette page, l'URL ressemble à ceci: s/global-device?linkId=5&mypageid=5003M000001fMQHQA2#notifpage

J'utilise #notifpagepour diriger vers la notifpagesection de la page lorsque la page se charge. La page est chargée comme prévu mais n'est pas dirigée vers cette section.

Dans la connectedcallbackméthode de parentLWC, je fais un appel au serveur pour définir la valeur de showchildet para1value, mais je pense que cela ne devrait pas avoir d'incidence sur le problème.

Réponses

2 PhilW Aug 18 2020 at 13:58

Les LWC se chargent et s'affichent de manière asynchrone, mais l'identifiant de fragment # est appliqué au moment du chargement de la page. Ainsi, l'ancre nommée avec l'identifiant de fragment que vous avez utilisé n'existe pas au moment opportun et le navigateur ne peut pas y faire défiler.

Vous auriez besoin d'un code qui attend que le chargement de la page (y compris le rendu LWC) se termine, puis appliquez du code qui trouve et "défile jusqu'à" l'élément nommé.

1 devforce Aug 20 2020 at 01:01

Comme mentionné par @Phil, j'utilise maintenant une renderedCallbackméthode pour vérifier si l'URL a un identifiant de fragment #notifpage, puis je passe à cette section en utilisant 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();
  } 
}