Я пытаюсь прокрутить до якоря после перехода по ссылке на маршрутизаторе, используя фрагменты.
** Компонент 1 **
<a routerLink="/training/{{ currentTrainingId }}" fragment="{{currentDomainId}}">
Эта ссылка должна привести пользователя к компоненту 2. I надеялся добиться прокрутки привязки, присвоив элементу идентификатор, а затем автоматически добавив #id в URL с использованием фрагментов.
** Компонент 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
Однако прокрутка якоря не происходит. Я думаю, что это связано с асинхронной загрузкой данных. При выполнении прокрутки привязки домены еще не загружены.
Я создал stati c div, а затем прокрутка привязки работает.
Кто-нибудь знает, как с этим справиться asyn c прокрутка данных и привязки?
Решение
Не полагайтесь на автоматическую прокрутку привязки c, а запрограммируйте собственную функцию прокрутки. На основании @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);