如何等待頁面數據加載和呈現Angular with Observables

這可能嗎？我想如何等待頁面數據加載和呈現Angular with Observables

1）獲取在頁面加載一些數據與可觀察到的

2）更新與該數據的DOM並呈現HTML

3）找到的東西像素位置

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

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

我正在使用this project，它使用ngrx和Angular 2和RxJS Observables替換使用JQuery的this one。

這是我試圖解決的特定問題。如果您在諸如mypage.html＃34之類的網址中傳遞錨點ID，則頁面將滾動至該點。這就是網頁永久運作的方式。問題是，如果在頁面頂部有固定的標題作爲div，並且css爲position:fixed，則文檔中的目標定位點將被移到頁面頂部，位於標題後面。而且，如果數據和錨點最初不在，它將不會滾動。所以據我所知，你需要在JavaScript中加入一些長度，以使其正確工作。如果你知道另一種方式，不使用IFRAME，請告訴我。我願意接受創意。我希望anchor id在頁面的url中，這樣我就可以共享包含列表的此頁面的鏈接並展開給定項目的詳細信息並滾動到該頁面。

來源

2017-01-02 Dan Cancro

爲什麼不填充頂一樣設置你的內容容器夏理的高度？ html：'

'，css：'header {position：fixed，height：20px}; content {padding-top：20px}'。 – Timathon

是的html元素？我只能找到這個，這已被棄用https://developer.mozilla.org/en-US/docs/Web/HTML/Element/content –

我最近的評論是不好的。對於「抵消固定標題的內容」，你可以參考這篇文章：http://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header。有一些基於純CSS的解決方案。我已經瘋了與解決方案之一codepen，http://codepen.io/rxjs-space/pen/OWLeBd – Timathon

創建一個服務：在你的組件類

@injectable export class whateverService(){ //getter & setter service for position }
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); } }

來源

2017-01-03 05:35:19

我認爲這將不會工作，如果它需要超過100毫秒的數據。 –

是的，需要把默認ID或它會採取前一個 –

如何等待頁面數據加載和呈現Angular with Observables

回答

相關問題