スクロール、非同期再び
前回の方法、スクロールはTopに移動する位ならうまく行くのですが、個々のページ情報からページリスト(長い)に戻った時の処理を考えるとうまく行っているとは言えません。
あるべき姿は以下のようになります。
ページリストから108ページの詳細情報を表示させる。
↓
詳細情報が表示されているページからページリストに戻る
↓
ページリストの108ページが表示されている
しかし、ページリストに戻る処理の直下に、ページリスト108ページへ移動させようとしても一番トップが表示されてうまく行きません。
起きていることは予想できますが、ページリストに戻る処理が完了する前に(まだ表示されていない)ページリストの108ページに移動しようとして失敗していると思われます。
確認のため、setTimeoutを使用して3秒後にページリストの表示位置を変更させると、問題なく移動します。
---------------------------------------------------------------
this.TruePageType="PagePage"; //ページリストを表示
setTimeout(() => { //3秒後にページリストの表示位置を変更
let el = document.getElementById("pageinfo18");
el.scrollIntoView();
}, 3000);
---------------------------------------------------------------
となると、非同期で行われているページの切り替えを、何らかの手段で検知して、レンダリング(つまり描画)が終わったら、表示位置の変更を行えば・・・という事になります。
まあ、上の手段で適当な時間を経過させる方法も最悪考えていますが。(100分の1秒経過なら十分、10分の1秒ならまず問題はないでしょう)
とは言え、負けた気もしますので『angular レンダリング 完了』で検索すると、そのものずばりのサイトやAngularの(興味深い)技術的側面の記事が出てきます。
ただ、少々、すぐに理解という訳には行かない模様ですね。
参考サイトだけ記して、お手軽なsetTimeoutで当面は乗り切ります。
参考サイト
Angularのレンダリングメカニズムの詳細解説
https://tech.bitbank.cc/20201221/
【Angular】ngForが完了した時に処理を走らせたい
https://qiita.com/m-hamada/items/f3db656e02674cee9788
(筆者注：ngForは完了済みなのですこしちがうかも?)
AngularJSでHTMLレンダリングが完了したことをどのように検出できますか
https://tagsqa.com/detail/51233
(筆者注:内容も気になるけれど左サイドのアクセサリ?が気になります)
