Question

在我的angular5应用程序中，我正在使用一个表。表中的数据来自后端。当表第一次完全加载时，我想更改表内的滚动位置。为此，我这样做：

ngAfterViewInit() {
    setTimeout(function () {
        const scroller = document.getElementById('list-container');
        scroller.scrollTop = amountTop; // amountTop is the calculated height, which represents the centre of the table 
    }, 500);
}

对于DOM操作有没有更好的方法，而不是使用setTimeout（）函数？

Answer 1

您需要在setTimeout的API调用成功时执行滚动顶部代码，超时为0，这样代码在勾选后执行，即在使用数据绑定完成角度后执行

this.marketService.getBuyOrder(marketId, start, limit)
.subscribe(data => { 
    const buyOrders = data; 
    if (buyOrders.length > 0) { 
        this.bids = this.bids.concat(buyOrders); 
    } else { 
        this.loadMore = false; 
    } 
    this.cd.markForCheck();

    // The timeout is set to 0 to allow angular to bind the array to view
    setTimeout(function () {
        const scroller = document.getElementById('list-container');
        scroller.scrollTop = amountTop;
    }, 0);
}, (err: HttpErrorResponse) => { Helper.handleError(err, this.alertService); });

Answer 2

如果您希望在加载数据时显示您的页面，我强烈建议您使用route resolves。这篇文章展示了如何构建和实现它，但我将试着简单地解释一下。

在访问组件时，不会加载数据，而是在访问某个URL时触发路由解析。这将从您的服务获取数据并将其添加到路由快照数据。您可以从组件中通过ActivatedRoute访问此数据，只有在路由解析成功后才会加载您的组件。

文章没有解释的一件事是如何处理异常，但这里是一个代码片段，因此您不必显示空白页面。我建议你在看完这篇文章之后再看看这个。

resolve(route: ActivatedRouteSnapshot): Observable<MyObject> {
    return this.myService.getMyObjectById(route.params['id'])
        .map(myObject => {
            return myObject;
        })
        .catch(e => {
            console.error(e);
            return Observable.of([]); // You could return an other object.
            this.router.navigate(['404']); // Or you could redirect to a different page using the @angular/router
        });
}

<强>更新

这在您的具体情况下意味着您可以致电

ngOnInit() {
    this.myList = this.route.snapshot.data['myList']
    const scroller = document.getElementById('list-container');
    scroller.scrollTop = amountTop;
}

现在，您确定在调用ngOnInit方法时数据存在，因为仅在成功解析时才加载组件

更新2

如果您想以异步方式加载数据而不解析路由，可以像这样解决

ngOnInit() {
    this.myService.getMyObjectByAParameter(myParameter).subscribe(
      myList => {
          this.myList = myList;
          const scroller = document.getElementById('list-container');
          scroller.scrollTop = amountTop;
      }, err => {
          // Handle your exception
      }
  );
}

如果您这样做，您的组件将始终加载，但滚动只会在成功加载数据后设置为。

Angular5：当角度完成页面加载？

2 个答案: