在Angular路由配置中添加一个导航事件处理程序,并将窗口滚动到顶部。
示例代码:
在app-routing.module.ts中添加以下代码:
import { NgModule } from '@angular/core'; import { Routes, RouterModule, NavigationEnd } from '@angular/router';
... const routes: Routes = [ ... ];
@NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { constructor(router: Router) { router.events.subscribe((event: NavigationEnd) => { if (event instanceof NavigationEnd) { window.scrollTo(0, 0); } }); } }
上述代码添加了一个导航事件处理程序,当导航结束时,它将窗口滚动到顶部。注意,我们需要检查导航事件是否是NavigationEnd类型的事件,因为路由器会生成各种不同类型的事件。
现在,当我们使用Angular Material导航到一个新页面时,页面会从顶部加载。