Langsung ke bagian halaman tertentu saat dimuat di LWC
Saya memiliki nama halaman komunitas 'global-device' yang memiliki komponen LWC dan memiliki LWC turunan.
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>
Sekarang, ketika saya membuka halaman ini, URL terlihat seperti ini: s/global-device?linkId=5&mypageid=5003M000001fMQHQA2#notifpage
Saya menggunakan #notifpage
untuk mengarahkan ke notifpage
bagian halaman saat halaman dimuat. Halaman dimuat seperti yang diharapkan tetapi tidak diarahkan ke bagian ini.
Dalam connectedcallback
metode parentLWC
, saya membuat panggilan server untuk menetapkan nilai showchild
dan para1value
, tetapi saya pikir ini seharusnya tidak memengaruhi masalah.
Jawaban
LWC memuat dan merender secara asinkron, namun # pengenal fragmen diterapkan pada saat halaman dimuat. Jadi jangkar bernama dengan pengenal fragmen yang Anda gunakan tidak ada pada waktu yang tepat dan browser tidak bisa menggulir ke sana.
Anda akan membutuhkan kode yang menunggu untuk pemuatan halaman (termasuk rendering LWC) untuk menyelesaikan dan kemudian menerapkan beberapa kode yang menemukan dan "menggulir ke" elemen bernama.
Seperti yang disebutkan oleh @Phil, saya sekarang menggunakan renderedCallback
metode untuk memeriksa apakah URL memiliki pengenal fragmen #notifpage
dan kemudian pindah ke bagian itu menggunakan 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();
}
}