LWCでのロード時にページの特定の部分に直接移動する
Aug 18 2020
LWCコンポーネントと子LWCを持つコミュニティページ名「global-device」があります。
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();
}
}