从ViewportScroller在角6使用scrollToAnchor

Posted 2023-01-15

我无法弄清楚如何使用功能ViewportScroller.scrollToAnchor(string anchor)。

首先是 - 我怎么定义我的html锚？我可能会产生混淆锚，routerlinks和片段。

我的代码是基于碎片截至目前：

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

答案

我不认为你可以这样做的。看来，当你使用的是ngFor，滚动到锚的DOM完成之前被调用。所以，在你ngOnInit你可以得到的片段，但将无法找到锚，因为ngFor尚未完成。

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

更妙的是，如果你需要通过路由通过数据和潜在的复杂对象，将设置存储数据服务，然后将其注入到组件

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