Angular ng2页面滚动：跨路由工作时等待内容加载

我使用ng2页面滚动（）如下：

很好，除了。。。假设我在路由器一号上，fragment

content1

，我点击了

Link2

，在那里我有许多组件需要加载它们的数据

路由完成后，它只会转到我的片段，这是可以理解的，但我的数据可能还没有加载，可能会在接下来的1000毫秒内加载

因此，它基本上转到该id/片段，然后加载数据，并且您不再在屏幕上看到您请求的带有id/片段的部分

当您跨路由工作时，如何设置延迟以提供加载数据的机会

编辑：

const childRoutes: Routes = [
    { path: 'router-one', component: OneComponent, pathMatch: 'full' },
    { path: 'router-two', component: TwoComponent, pathMatch: 'full' },
    { path: 'router-three', component: ThreeComponent, pathMatch: 'full' }
];

---

问题是，您导航到的路线上的数据需要一些时间才能加载？ 我想处理这种情况的最佳方法是在加载数据时使用目标路由/组件上的PageScrollService触发滚动动画（发生这种情况时，您可能会收到一个事件，例如http请求完成）。您可以将滚动目标元素作为可选路由参数传递给新路由。（）

---

来源：

目标片段很容易位于与视图加载时不同的位置，而不是在视图水合后。在我的例子中，直到数据加载后，目标ID才出现。通过抓取片段的副本并在加载数据后使用ng2 page scroll滚动到片段，解决了这个问题

页面具有目标id:

<span id="target-position"></span>

---

你能发布更多的代码吗？你应该创建@Chrillewoodz，基本上就是这样，没有更多的代码…：）我按照链接中的步骤安装了模块。你必须有路由器，不是吗？@Chrillewoodz，是的，我编辑了我的帖子。值得一提的是，该模块似乎可以工作，但它只是在加载数据之前滚动，因此在加载数据之后，该部分不再处于折叠状态，必须向下滚动才能看到它。

constructor(
 private route: ActivatedRoute,
 private pageScrollService: PageScrollService,
 @Inject(DOCUMENT) private document: Document) {}

ngOnInit() {
    this.route.params.forEach((params: Params) => {
        if (params['scrollTo']){
            let pageScrollInstance: PageScrollInstance = PageScrollInstance.simpleInstance(this.document, params['scrollTo']);
            this.pageScrollService.start(pageScrollInstance);
        }
}

<span id="target-position"></span>

<a [routerLink]="['some-route']" fragment="target-position">Link 1</a>

routeFragment: string;

ngOnInit() {

  this.route.fragment.subscribe(f => {
    // save fragment for later scroll target
    this.routeFragment = f;
  });

  this.someDataService.get().subscribe(data => {

    // do something with data
    this.data = data;

    // data is loaded, scroll to original fragment
    this.pageScrollService.start(PageScrollInstance.simpleInstance(this.document, `#${this.routeFragment}`));

  });

}