LWC'de yüklenirken sayfanın belirli bir bölümüne doğrudan

Aug 18 2020

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 #notifpageyönlendirmek için kullanıyorum notifpage. Sayfa beklendiği gibi yükleniyor ancak bu bölüme yönlendirilmiyor.

In connectedcallbackyöntemine parentLWC, ben set değerine bir sunucu çağrısı yapıyorum showchildve para1valueancak, bu her konuda etkilememesi gerekir düşünüyorum.

Yanıtlar

2 PhilW Aug 18 2020 at 13:58

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.

1 devforce Aug 20 2020 at 01:01

@Phil tarafından belirtildiği gibi, şimdi renderedCallbackURL'nin parça tanımlayıcısına sahip olup olmadığını kontrol etmek için bir yöntem kullanıyorum #notifpageve 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();
  } 
}