Angular: прокрутка вверх при изменении маршрута

Question

У нас есть приложение с более чем 300 компонентами с множеством дополнительных маршрутизаторов. Пока только один вложенный глубоко. Например) <router-outlet #root-router> -> <wrapper-component> -> <router-outlet #child-router>

По некоторым причинам мы не можем настроить маршрутизатор angular таким образом, чтобы прокручивать представление вверх после каждой навигации. Мы испробовали многие из представленных SO-решений, но, похоже, существует специфическая проблема c в настройке нашего приложения. Я полагаю, что это может иметь какое-то отношение к нашим CSS.

Несмотря на это, эти решения по какой-то причине не работают для нас:

this.router.events.subscribe((evt) => {
  if (!(evt instanceof NavigationEnd)) {
    return;
  }
  window.scrollTo(0, 0);
});

RouterModule.forRoot(routes, {
  scrollPositionRestoration: 'enabled'
})

Мы пытались разместить его оба в app.component и в дочерних компонентах-оболочках, которые содержат дочерний элемент.

В любом случае, было бы абсурдно помещать эти логи c в КАЖДЫЙ компонент (не говоря уже о каждом дочернем компоненте-оболочке) , Кто-нибудь сталкивался с подобной проблемой? * CSS Файл анимации маршрутизатора

export const fadeAnimation = trigger('fadeAnimation', [
  // The '* => *' will trigger the animation to change between any two states
  transition('* => *', [
    style({position: 'relative'}),
    query(
      ':enter, :leave',
      [style({
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        padding: '0 20px 20px 20px'
      })],
      {optional: true}
    ),
    query(
      ':enter',
      [style({opacity: 0})],
      {optional: true}
    ),
    query(
      ':leave',
      [style({opacity: 1}), animate('0.2s', style({opacity: 0}))],
      {optional: true}
    ),
    query(
      ':enter',
      [style({opacity: 0}), animate('0.2s', style({opacity: 1}))],
      {optional: true}
    )
  ])
]);

app.component. html

<div [ngClass]="theme" class="theme">
  <app-topnav></app-topnav>

  <mat-sidenav-container>
    <mat-sidenav (closed)="navItemService.sideNavOpened = false" [(opened)]="navItemService.sideNavOpened" mode="over"
                 position="end">
      <app-sidenav></app-sidenav>
    </mat-sidenav>

    <mat-sidenav-content>
      <main [@fadeAnimation]="o.isActivated ? o.activatedRoute : ''">
        <router-outlet #o="outlet"></router-outlet>
      </main>
      <app-footer></app-footer>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

app.component. css

div.theme {
  display: grid;
  grid-template-rows: min-content 1fr;
  height: 100%;
}

mat-sidenav {
  height: 100%;
  width: 20em;
  background: #428bca;
  border-right: 2px lightgray solid;
}

mat-sidenav-content {
  display: grid;
  grid-template-rows: 1fr min-content;
}

main {
  padding: 0 20px 20px 20px;
}

Answer 1

Привет для прокрутки к вершине я использую эти компоненты, добавленные в app.component

<button type="button" class="link-hover btn-move-top" [ngClass]="{'show-bt-top': isVisible === true }" (click)="moveTop()">
    <i class="link-hover fas fa-arrow-up"></i>
  </button>

//File .ts
    import { Component, HostListener, OnInit, Inject, PLATFORM_ID } from '@angular/core';
    import { isPlatformBrowser } from '@angular/common';
    import { ScrollService } from '../../services/scroll.service';

    @Component({
      selector: 'app-button-scroll-top',
      templateUrl: './button-scroll-top.component.html',
      styleUrls: ['./button-scroll-top.component.scss']
    })
    export class ButtonScrollTopComponent implements OnInit {

      scrollDistance = 200;
      isVisible = false;
      isBrowser: boolean;

      constructor(@Inject(PLATFORM_ID) platformId, public _scrollService: ScrollService) {
        this.isBrowser = isPlatformBrowser(platformId);
       }

      ngOnInit() {
      }


      moveTop(){
        this._scrollService.scrollToTop();
      }

    @HostListener('window:scroll', [])
        onWindowScroll() {
            if (this.isBrowser) {
                this.isVisible = this.getCurrentScrollTop() > this.scrollDistance ? true : false;
            }
        }

        getCurrentScrollTop() {
          if (typeof window.scrollY !== 'undefined' && window.scrollY >= 0) {
              return window.scrollY;
          }

          if (typeof window.pageYOffset !== 'undefined' && window.pageYOffset >= 0) {
              return window.pageYOffset;
          }

          if (typeof document.body.scrollTop !== 'undefined' && document.body.scrollTop >= 0) {
              return document.body.scrollTop;
          }

          if (typeof document.documentElement.scrollTop !== 'undefined' && document.documentElement.scrollTop >= 0) {
              return document.documentElement.scrollTop;
          }

          return 0;
      }

    }

S css Файл

.btn-move-top{
    width: 40px;
    height: 40px;
    bottom: 10%;
    right: 0;
    background-color:#000;
    position: fixed;
    display: none;
    cursor: pointer;
    outline: none;
    text-decoration: none;
    border: none;
    border-radius: 3px 0 0 3px;
    -webkit-animation: slide-in-fwd-right 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-fwd-right 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;

    &.show-bt-top{
        display:block;
        z-index: 9997;
    }

    i{
        color:#fff;
        font-size:14px;
    }
}

@-webkit-keyframes slide-in-fwd-right {
    0% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-fwd-right {
    0% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}