在角度 6 中使用 ViewportScroller 中的 scrollToAnchor答案

【问题标题】：Use scrollToAnchor from ViewportScroller in angular 6在角度 6 中使用 ViewportScroller 中的 scrollToAnchor
【发布时间】：2019-03-31 05:31:43
【问题描述】：

我不知道如何使用函数ViewportScroller.scrollToAnchor(string anchor)。

首先 - 如何在我的 html 中定义锚点？我可能会混淆锚点、路由器链接和片段。

我现在基于片段的代码：

export class ItemsOverviewPage implements OnInit {
    public items: Item[];

    constructor(private route: ActivatedRoute,
                private scroller: ViewportScroller) {}

    public async ngOnInit(): Promise<void> {
        const fragment = await this.route.fragment.first().toPromise();
        if (fragment !== undefined || fragment !== null) {
            this.scroller.scrollToAnchor(fragment);
        }
    }
}

html 类似于

<ion-card mode="md"
    *ngFor="let i of items"
    routerDirection="forward"
    id="{{ i.title) }}">
</ion-card>

如何引用 id？或者我应该在我想要滚动到的任何地方做一个<a>...</a>？

我正在导航到如下页面：

this.router.navigate(['/items'], { fragment: item.title });

【问题讨论】：

标签： scroll angular6

【解决方案1】：

我认为你不能那样做。似乎，当您使用 ngFor 时，滚动到锚点会在 DOM 完成之前被调用。因此，在您的 ngOnInit 中，您可以获得片段，但无法找到锚点，因为 ngFor 尚未完成。

做你想做的事情的一种方法是使用路由参数而不是片段。你可以在 ItemsOverviewPageComponent 的 ngOnInit 中检索参数并将其存储在变量中（例如 _fragment），然后滚动到ngAfterViewInit() 钩子中的锚点使用 document.getElementById(this._fragment).scrollIntoView();
另一种选择，可能是使用navigationExtras。

更好的是，如果您需要通过路由传递数据和潜在的复杂对象，则可以设置一个存储数据的服务，然后将其注入到组件中

欲了解更多信息，请参阅ActivatedRoute、NavigationExtras

【讨论】：