Прямо к определенной части страницы при загрузке в LWC
У меня есть страница сообщества с именем global-device, в которой есть компонент LWC и дочерний 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>
Теперь, когда я попадаю на эту страницу, URL-адрес выглядит так: s/global-device?linkId=5&mypageid=5003M000001fMQHQA2#notifpage
Я использую #notifpage
для перехода к notifpage
разделу страницы, когда страница загружается. Страница загружается должным образом, но не попадает в этот раздел.
В connectedcallback
методе parentLWC
я делаю вызов сервера, чтобы установить значение showchild
и para1value
, но я думаю, что это не должно повлиять на проблему.
Ответы
LWC загружаются и обрабатываются асинхронно, но идентификатор фрагмента # применяется во время загрузки страницы. Таким образом, именованный якорь с идентификатором фрагмента, который вы использовали, не существует в соответствующее время, и браузер не может перейти к нему.
Вам потребуется код, который ожидает завершения загрузки страницы (включая визуализацию LWC), а затем применяет некоторый код, который находит и «прокручивает» названный элемент.
Как упомянул @Phil, теперь я использую renderedCallback
метод, чтобы проверить, имеет ли URL-адрес идентификатор фрагмента, #notifpage
а затем перейти к этому разделу, используя 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();
}
}