【问题标题】：Angular 9, scroll restoration/anchor scrolling does not work with async data loadingAngular 9，滚动恢复/锚滚动不适用于异步数据加载
【发布时间】：2020-03-06 10:59:06
【问题描述】：

在使用片段通过 routerlink 导航后，我试图滚动到锚点。

** 组件 1 **

<a routerLink="/training/{{ currentTrainingId }}" fragment="{{currentDomainId}}">

这个链接应该把用户带到组件2。我希望通过给元素一个id然后使用片段在URL中自动添加#id来实现锚滚动。

** 组件 2 **

<div *ngIf="all data has been loaded">
    ....
    <domain-overview *ngFor="let domain of domains" [id]="domain.id"></domain-overview>
</div>

生成的 URL 似乎是正确的。

http://localhost:4200/training/28#40

但是，锚点滚动不会发生。我认为这与异步加载数据有关。执行锚滚动时域尚未加载..

我已经创建了一个静态 div，然后锚滚动就可以工作了。

有人知道如何处理异步数据和锚点滚动吗？

解决方案

不要依赖自动锚点滚动，而是编写自己的滚动功能。根据@Vinaayakh 他的回答，我得到了以下可行的解决方案。

scroll(id){
    const elmnt = document.getElementById(id);
    elmnt.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
}

this.route.fragment.subscribe((fragment: string) => {
  this.fragment = fragment;
});

稍后，在订阅的完整部分中加载所有数据后，我调用滚动函数。

setTimeout(() => {
    this.scroll(this.fragment);
 }, 250);

【问题讨论】：

你试过没有*ngIf的代码吗？

标签： angular asynchronous anchor

【解决方案1】：

尝试添加此功能

scroll(id){
    const elmnt = document.getElementById(id);
    elmnt.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
}

并将函数添加到 HTML

<domain-overview *ngFor="let domain of domains" (click)="scroll(id)" [id]="domain.id"></domain-overview>

【讨论】：

感谢您的建议！但是当有人点击域时，这不会滚动到域吗？当用户根据 url 中的 id 返回页面时，我想滚动到域。
它们是在同一个组件中还是不同的组件中？
不同的组件。我将尝试在问题中澄清这一点。
如果您在页面加载后有一些动态数据进入，您可以尝试在页面加载当前路由参数而不是点击后调用 scroll() 函数
哦，非常感谢老兄！我让它工作了：D。我确实必须添加一个超时。

【解决方案2】：

更新以包含无需订阅路由片段即可使用的 ActivatedRoute.snapshot（属性）：

constructor(private route: ActivatedRoute){
    this.fragment = this.route.snapshot.fragment
}

然后在你的 ngOnInit 中：

if(!!this.fragment){
    this.scroll(this.fragment)
}

如果需要，您可以将 if 语句放入 setTimeout 中，但这会简化代码，同时不需要在 ngOnDestroy 中取消订阅。

【讨论】：