страница не загружается сверху при переходе на новую страницу под углом

Question

это базовое приложение angular 5, сгенерированное командой ng new без библиотеки добавлено то, что я изменил, упоминается ниже

Угловая версия: 5.2.0

Если кто-то хочет проверить полный код или протестировать приложение, перейдите по этой ссылке. GitHub репо

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes} from '@angular/router';

import { AppComponent } from './app.component';
import { Page1Component } from './page1/page1.component';
import { Page2Component } from './page2/page2.component';


const RoutesArray: Routes = [
  { path: 'page1' , component: Page1Component },
  { path: 'page2' , component: Page2Component }
];


@NgModule({
 declarations: [
    AppComponent,
    Page1Component,
    Page2Component
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(RoutesArray)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<nav>
  <a [routerLink]="['/page1']" routerLinkActive="active">Page 1</a>
  <a [routerLink]="['/page2']" routerLinkActive="active">Page 2</a>
</nav>

<div class="pointer">
  <span class="line"></span>
  <span class="arrow"></span>
</div>

<router-outlet></router-outlet>

page1.component.html и page2.component.html

<header>
  PAGE 1
  <!-- PAGE 2 -->
</header>

<div class="scale">
  <span>0</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>10</span>
  <span>11</span>
  <span>12</span>
</div>

если я нахожусь на странице 1 и прокручиваю страницу вниз, а затем перехожу на страницу 2, страница 2 загружается из той же позиции прокрутки, что я прокручивал на странице 1

вместо этого я хочу, чтобы страница 2 загружалась сверху независимо от того, сколько я прокрутил на предыдущей странице.

Любое предложение, как этого добиться.

Answer 1

добавьте это в свой AppComponent

Сначала импортируйте это

import { Router, NavigationEnd} from '@angular/router'; 

тогда в вашем конструкторе

constructor(private router: Router){
   //subscribes every changes of your route
   this.router.events.subscribe((event) => {
       if (event instanceof NavigationEnd){
          //scroll to top
          window.scrollTo(0,0);
       }
    }
}