Direct vers une partie spécifique de la page lors du chargement dans LWC
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 #notifpage
pour diriger vers la notifpage
section 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 connectedcallback
méthode de parentLWC
, je fais un appel au serveur pour définir la valeur de showchild
et para1value
, mais je pense que cela ne devrait pas avoir d'incidence sur le problème.
Réponses
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é.
Comme mentionné par @Phil, j'utilise maintenant une renderedCallback
mé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();
}
}