如何使用Observables

时间:2017-01-02 16:58:51

标签: angular rxjs ngrx

这可能吗?我想

1)使用Observable获取页面加载的一些数据

2)使用该数据更新DOM并呈现HTML

3)找到某物的像素位置

4)根据该位置滚动页面

我不知道怎么做(3)等到(2)结束。

我正在使用this project使用ngrx和Angular 2以及RxJS Observable来替换使用JQuery的this one

这是我试图解决的特殊问题。如果您在mypage.html#34等网址中传递一个锚点ID,页面将滚动到该点。这就是页面永远有效的方式。问题是如果在页面顶部有固定标题作为带有css position:fixed的div,则文档中的目标锚点将移动到标题后面的页面顶部。此外,如果最初没有数据和锚点,它将不会滚动。所以,据我所知,你需要在javascript中使用它以使其正常工作。如果你知道另一种方式,不使用IFRAME,请告诉我。我愿意接受各种想法。我希望锚点ID位于页面的URL中,这样我就可以共享包含列表的页面的链接,并展开给定项目的详细信息并滚动到它。

1 个答案:

答案 0 :(得分:0)

  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); } }