如何等待页面数据加载和呈现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

回答

相关问题