angular - 以角度导航到新页面时页面未从顶部加载
问题描述
这是由命令生成的基本 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 页应该从顶部加载,无论我在前一页上滚动了多少。
任何建议如何实现这一点。
解决方案
在你的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);
}
});
}