LWC'de yüklenirken sayfanın belirli bir bölümüne doğrudan
Bir LWC bileşenine ve bir alt LWC'ye sahip olan 'global-device' adlı bir topluluk sayfam var.
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>
Şimdi, bu sayfaya geldiğimde, URL şöyle görünüyor: s/global-device?linkId=5&mypageid=5003M000001fMQHQA2#notifpage
Sayfa yüklendiğinde sayfanın bir bölümüne #notifpage
yönlendirmek için kullanıyorum notifpage
. Sayfa beklendiği gibi yükleniyor ancak bu bölüme yönlendirilmiyor.
In connectedcallback
yöntemine parentLWC
, ben set değerine bir sunucu çağrısı yapıyorum showchild
ve para1value
ancak, bu her konuda etkilememesi gerekir düşünüyorum.
Yanıtlar
LWC'ler eşzamansız olarak yüklenir ve oluşturulur, ancak # parça tanımlayıcısı sayfa yüklenirken uygulanır. Bu nedenle, kullandığınız parça tanımlayıcısına sahip adlandırılmış çapa uygun zamanda mevcut değildir ve tarayıcı ona kaydıramaz.
Sayfanın yüklenmesini bekleyen (LWC oluşturma dahil) koda sahip olmanız ve ardından adlandırılmış öğeyi bulan ve "kaydıran" bazı kodu uygulamanız gerekir.
@Phil tarafından belirtildiği gibi, şimdi renderedCallback
URL'nin parça tanımlayıcısına sahip olup olmadığını kontrol etmek için bir yöntem kullanıyorum #notifpage
ve ardından kullanarak o bölüme geçiyorum 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();
}
}