如何使用Observables等待頁面數據在Angular中加載和渲染

Question

這可能嗎？ 我想要

1）使用Observable獲取頁面加載時的一些數據

2）使用該數據更新DOM並呈現HTML

3）找到某物的像素位置

4）滾動頁面取決於該位置

我不知道如何使（3）等到（2）完成。

我工作的這個項目使用NGRX和角2個RxJS觀測量來代替這一個使用JQuery的。

這是我要解決的特定問題。 如果您在mypage.html＃34之類的網址中傳遞錨定ID，則頁面將滾動到該位置。 這就是頁面永遠工作的方式。 問題是，如果將具有css position:fixed固定標題作為div position:fixed在頁面頂部，則文檔中的目標錨將移動到頁面頂部標題的后面。 此外，如果最初沒有數據和錨點，它將不會滾動。 據我所知，您需要使用javascript中的長度才能使其正常工作。 如果您不使用IFRAME就知道另一種方法，請告訴我。 我願意接受想法。 我希望錨點ID位於頁面的url中，以便我可以共享指向包含列表的頁面的鏈接，並展開給定項目的詳細信息並滾動到該頁面。

Answer 1

1. 創建一項服務：

   @injectable export class whateverService(){ //getter & setter service for position }

2. 在您的組件類中

   export whateverComponent implements OnInit(){ constructor(private serviceObj:whateverService){} ngOnInit(){ // write your logic here like : let x = this.serviceObj.getFunction(); setTimeout(function() { document.getElementById(x).scrollIntoView(); }, 100); } }