Question

我使用ng2-page-scroll（https://www.npmjs.com/package/ng2-page-scroll），如下所示：

<a pageScroll [routerLink]="['router-one']" href="#content1">Link 1</a> <a pageScroll [routerLink]="['router-two']" href="#content2">Link 2</a> <a pageScroll [routerLink]="['router-three']" href="#content3">Link 3</a>

工作得很好，除了...让我说我在router-one，片段content1，然后点击Link2，我有许多组件，需要加载他们的数据。

路由完成之后，它只是转到我的片段，这是可以理解的，但我的数据可能尚未加载，并且可能会在接下来的1000毫秒内加载。

所以基本上，转到id / fragment，然后加载数据，你不再在屏幕上看到你请求的id / fragment的部分。

当您跨越路线工作时，如何设置延迟以使数据有机会加载？

修改

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

Answer 1

目标片段很容易在视图加载到视图水合后的不同位置。就我而言，在加载数据之前，目标ID甚至不存在。通过抓取片段的副本并使用ng2-page-scroll滚动到数据加载后的片段来解决这个问题。

页面有目标ID：

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

  });

}

Answer 2

问题是您导航到的路线上的数据需要一些时间来加载？我想处理这种情况的最好方法是使用目标路由/组件上的PageScrollService在加载数据后立即触发滚动动画（当发生这种情况时，您可能会收到一个事件，例如http请求已完成）。您可以将滚动目标元素作为可选路由参数传递给新路由。（https://angular.io/docs/ts/latest/guide/router.html#!#optional-route-parameters）

<a [routerLink]="['router-one', { scrollTo: '#content1' }]">Link 1</a>

在目标组件中，然后从activatedRoute访问scrollTo值并将其传递给PageScrollService，如：

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

来源：https://github.com/Nolanus/ng2-page-scroll/issues/48#issuecomment-254177855

ng2-page-scroll：在跨路由工作时等待内容加载

2 个答案: