如何在 Angular 中设置靠近垫行的滚动位置？

Question

我有超过 20 条记录加载到 angular material table。当我单击一行时，它会导航到一个页面。当我点击后退按钮时，它 return 到 table 页面。问题是当我单击 table 的最后一行时，滚动位置会转到顶部。 我只想将滚动位置设置为靠近单击的行。

如何实现并参考下面的代码 link。

https://stackblitz.com/edit/angular-material-router-mra2ke?file=src/app/plain/plain.component.ts

Answer 1

您必须做两件事才能使现有代码正常工作：

组件销毁时组件变量丢失。因此，不要使用组件变量来存储当前位置，而是使用 sessionStorage/localStorage 之类的浏览器存储，或者使用 variable from shared service 并将 id 设置为行。例如你可以这样做：

  get elementClickedId() {
    return sessionStorage.getItem('elementClickedId');
  }

  set elementClickedId(id) {
    sessionStorage.setItem('elementClickedId', id);
  }

在您的 html 中设置 ID：

<td mat-cell *matCellDef="let element" [id]="element.position">
   {{ element.position }}
</td>

当您尝试执行 document.getElementById 时，视图未初始化，因此不会自动滚动。因此，不要在 ngOnInit 中调用 moveToSection，而是在 ngAfterViewInit.

工作示例：https://stackblitz.com/edit/angular-material-router-eo6wnt?file=src/app/plain/plain.component.ts

PS: Angular 带有导航配置 scrollPositionRestoration that helps in achieving this. But unfortunately it doesn't work all the time, there's a defect for it - https://github.com/angular/angular/issues/24547

Answer 2

您需要单例服务才能保持当前位置：

（注意我们也可以使用localStorage或sessionStorage 但是强烈推荐使用单例服务，最好使用其他方式！）

@Injectable({
  providedIn: 'root',
})
export class ApiService {
  elementClickedId:any;
}

你还需要为你的 td 设置 id:

<td mat-cell *matCellDef="let element" id={{element.position}}>{{ element.position }}</td>

并使用 ngAfterViewInit 而不是 ngOnInit 以确保在完成 table 渲染后设置滚动条。

这是我为您创建的工作示例：StackBlitzForked

如何在 Angular 中设置靠近垫行的滚动位置？

How to set Scroll position near to mat row in Angular?

javascript

uiscrollview

typescript

angular

angular-material-table