Прямо к определенной части страницы при загрузке в LWC

Aug 18 2020

У меня есть страница сообщества с именем 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, но я думаю, что это не должно повлиять на проблему.

Ответы

2 PhilW Aug 18 2020 at 13:58

LWC загружаются и обрабатываются асинхронно, но идентификатор фрагмента # применяется во время загрузки страницы. Таким образом, именованный якорь с идентификатором фрагмента, который вы использовали, не существует в соответствующее время, и браузер не может перейти к нему.

Вам потребуется код, который ожидает завершения загрузки страницы (включая визуализацию LWC), а затем применяет некоторый код, который находит и «прокручивает» названный элемент.

1 devforce Aug 20 2020 at 01:01

Как упомянул @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();
  } 
}