Маршрутизатор anchorScrolling не работает с материалом mat-sidenav-container [fullscreen]

Question

Якорная прокрутка RouterModule основана на области прокрутки области просмотра, так как mat-sidenav-container устанавливает для себя 100% высоты при использовании с атрибутом fullscreen, переполнение области просмотра для RouterModule отсутствуетизменить.

<mat-sidenav-container fullscreen>
    <mat-sidenav-content></mat-sidenav-content>
</mat-sidenav-content>

В приведенном выше примере весь прокручиваемый контент находится внутри mat-sidenav-content.

Есть ли способ для RouterModule использовать mat-sidenav-container вместо области просмотра в качестве ссылки контейнера прокрутки?

См. Пример StackBlitz .См. рабочую версию без полноэкранного режима .

Answer 1

Есть ли для этого решение mat-sidenav-content?В качестве обходного пути я подписываюсь на события маршрутизатора и смотрю на Scroll.anchor, затем, согласно Используя ссылку привязки #id в Angular 6 , я могу повлиять на плавную прокрутку при просмотре дочернего элемента ...

ex.

в html:

  <a routerLink="/menu" fragment="pizza">Pizza</a>
  ...
  <div #pizza>...</div>

в компоненте:

    @ViewChild( 'pizza' ) pizza: ElementRef

    this.router.events.subscribe( (e:RouterEvent) => {
        if ( e instanceof Scroll ) {
          if ( e.anchor ==== 'pizza' ) {
            this.pizza.nativeElement.scrollIntoView( ... );
          }
        }
    } );