Question

这是由ng new命令生成的基本角度5应用程序无库   添加了我所改变的内容，如下所述

Angular Version：5.2.0

如果有人想查看完整代码或测试应用，请访问此链接。   github repo

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);
       }
    }
}

在以角度导航到新页面时，页面无法从顶部加载

1 个答案: