Angular 7.xx самый простой способ прокрутить фрагмент?

За последние два дня я копался в Интернете о прокрутке фрагмента в поле зрения с помощью angular.

Допустим, у нас есть статическая веб-страница с набором идентификаторов, которые действуют как фрагменты. И имеет боковую навигационную панель для навигации по фрагментам со ссылками.

Я попробовал Router anchorScroll, просто добавив это для модуля ничего не делает для меня. Он просто дает вам фрагмент в URL-адресе, но без прокрутки.

Я пробовал viewportScroller. Основная проблема в том, что это не работает в первый раз (например: вы перенаправлены на эту статическую страницу с нужным фрагментом, но прокрутка не происходит, если вы были на этой же странице и повторяете процесс , это работает, если вы нажмете на ссылку на боковой панели навигации, которая имеет тот же URL-адрес, что и вы посещаете: ([foo]/[bar]#[fragment]) она также не работает, поскольку навигация не изменилась.

дополнительные параметры, используемые для маршрутизатора:

const routerOptions: ExtraOptions = {
  useHash: false,
  anchorScrolling: 'enabled',
  scrollPositionRestoration: 'enabled',
  onSameUrlNavigation: 'reload'
};

ps: useHash: true ничего не меняет.

viewportScroller внутри ngOnInit:

this.viewportScroller.setOffset([0, 64]);
this.viewportScroller.setHistoryScrollRestoration('auto');

this.router.events.pipe(filter(element => element instanceof Scroll)).subscribe((element: any) => {
  console.log(element)
  this.viewportScroller.scrollToAnchor(element.anchor);
});

Как проще всего прокрутить до фрагмента БЕЗ!!! используя это:

ngOnInit() {
  this.route.fragment.subscribe((fragment: string) => { 
    if (fragment && document.getElementById(fragment) != null) {
      document.getElementById(fragment).scrollIntoView({ behavior: "smooth" });
    }
  });
}

b/c с этим работает каждый раз, но это не TS, так как мы используем TS в проектах нашей компании.

Помогите мне пожалуйста


typescript scroll angular7 angular-routerlink angular-router
person Exitl0l    schedule 07.02.2019    source источник

Ответы (2)


arrow_upward
19
arrow_downward

У меня была такая же проблема. Ознакомьтесь с этим решение Бена Наделя. Решение для Angular 7.X. Вы можете настроить RouterModule для обработки прокрутки привязки, даже при многократном щелчке по якорю с фрагментом. Вот код, который вам нужен:

 @NgModule({
  imports: [RouterModule.forRoot(routes,
            {
              anchorScrolling: 'enabled',
              onSameUrlNavigation: 'reload',
              scrollPositionRestoration: 'enabled'
            })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Надеюсь это поможет.

person Tom Schreck    schedule 04.04.2019
comment
Прокрутка фрагмента работает для меня. Но фрагмент не доходит до верхней части страницы. Как я могу получить фрагмент в верхней части страницы?. Я подробно задал вопрос здесь: -top-of-the-pag" title="angular 8 прокрутка к фрагменту не приводит фрагмент к началу страницы"> stackoverflow.com/questions/57962061/ - person Nitin Avula; 16.09.2019

arrow_upward
0
arrow_downward

⚠️ anchorScrolling: 'enabled не работает, когда вы используете *ngIf или что-то подобное, см. GitHub issue 1 и < href="https://github.com/angular/angular/issues/24547" rel="nofollow noreferrer">проблема GitHub 2. ⚠️

Современное однострочное решение для этой проблемы: https://stackoverflow.com/a/64185407/5356110

person Tilo    schedule 03.10.2020