Angular 7.xx Самый простой способ прокрутить фрагмент? - PullRequest
Новая
       37

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

0 голосов
/ 07 февраля 2019

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

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

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

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

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

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

пс .: 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" });
    }
  });
}

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

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

1 Ответ

0 голосов
/ 04 апреля 2019

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

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

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

...