角形布线时页面没有从顶部加载吗? [英] Page is not loading from the top when routing in angular?

问题描述

我的问题是-考虑有两个页面A和B.如果我在页面A上并向下滚动页面，然后单击某个按钮导航到页面B，则页面B保持与我在页面A中滚动的滚动位置相同.我希望页面B可以从页面中加载无论我在上一页上滚动了多少，都排名第一.

My problem is -- Consider there are two pages A and B. If I am on page A and scroll down the page and click some button to navigate to page B, the page B remains at the same scroll position that I have scrolled in page A. Instead of this I want the page B should load from the top no matter of how much I have scrolled on previous page.

app-routing.module.ts

const routes: Routes = [
  {path:'', redirectTo:'home', pathMatch:'full'},
  {path:'home', component: HomeComponent},
  {path:'about', component: AboutComponent},
  {path:'product', component: ProductComponent},
  {path:'contact', component: ContactComponent}
];

app.component.html

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

如何解决此问题?

我也尝试了以下解决方案:

And also I tried some solution like :

{scrollPositionRestoration:已启用"}

(activate)=" onActivate($ event)

window.scrollTo(0,0)

我尝试过的所有这些操作都是从上一页(A页)的滚动位置滚动到整个顶部(B页).还有其他解决方案，或者我什么都没想?

All these things I tried is scrolling all over the top(page B) from that scrolled position on previous page(page A). Any other solution for this or I am missing anything ?

推荐答案

在容器 AppComponent 中

        this.router.events.subscribe((evt) => {
          if (!(evt instanceof NavigationEnd)) {
            return;
          }
          let x = document.getElementsByClassName('mat-drawer-content');
          if (x.length > 0) x[0].scrollTo(0, 0);
        });

如果您使用的是Angular材质的 mat-drawer ，则可以使用.如果您使用的是另一个可滚动的div，请替换为该滚动条.

If you're using the mat-drawer from Angular material this will work. If you're using another div that scrolls replace it with that.

这篇关于角形布线时页面没有从顶部加载吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！