Question

我使用一个简单的链接导航到另一个页面，使用HashLocationStrategy：

//this method returns me name of song.
     private void getMusic() {
         String[] STAR = { "*"};
         Cursor cursor;
         Uri uri = MediaStore.Audio.Media.EXTERNAL_CONTENT_URI;
         String selection = MediaStore.Audio.Media.IS_MUSIC + " != 0";
         cursor = getContentResolver().query(uri, STAR, selection, null, null);
    if (cursor != null) {
        if (cursor.moveToFirst()) {
            int i = 0;
            do {
                   //this returns name of the song
                String songName = cursor.getString(cursor.
                            .getColumnIndex(MediaStore.Audio.Media.DISPLAY_NAME));
                  //this returns path of the song
                path[i] = cursor.getString(cursor
                            .getColumnIndex(MediaStore.Audio.Media.DATA));
                 //this returns album name of the song
                String albumName = cursor.getString(cursor
                            .getColumnIndex(MediaStore.Audio.Media.ALBUM));
                 //this returns albumid of the song
                int albumId = cursor.getInt(cursor                                                          
                            .getColumnIndex(MediaStore.Audio.Media.ALBUM_ID)); 
                 //this will add song in listview
                song.add(songName);
                i++;
            } while (cursor.moveToNext());
            b = i;
        }
        cursor.close();
    }

点击上面的链接后，正在加载<a href="/#/mypage">My Page</a></div>，但是由于我向下滚动了上一页，它被加载到页面中间（上一页的滚动位置相同）。

我确实有一个解决方法，但为什么会发生这种情况？

Answer 1

这种情况正在发生，因为没有实际的页面刷新。目前还没有关于如何在不使用变通方法的情况下触发此操作的实现。我想主要的问题是你可以在同一个屏幕上有多个router-outlet，如果它不应该向上滚动。

在AppComponent内，我使用此解决方法。您可能使用相同的：

constructor(private _router: Router) {}

ngOnInit() {
  this._router.events.subscribe((event: NavigationEnd) => {
    if(event instanceof NavigationEnd) {
      window.scrollTo(0, 0);
    }
  })
}

Answer 2

解决方法是在目标页面上定义：

@Component({
  ...
})
export class MyPageComponent {

   ngAfterViewInit() {
       window.scrollTo(0, 0);
   }
}

Answer 3

因为Angular会阻止链接点击事件的默认操作，因此页面不会滚动到顶部。

作为workarround，只需订阅router.events并过滤掉NavigationEnd事件：

this.router.events.subscribe(event => {
  if(event instance of NavigationEnd) {
     ... scroll to top
  }
}

Answer 4

我确实有一个解决方法，但为什么会发生这种情况？

它发生的原因之一，或更好地说：它没有发生，因为Angular2路由器可以用于在给定的插座内导航。您可以拥有许多named router outlets（或页面中某处的某个位置），并在浏览其中的任何页面后将页面滚动到顶部会破坏该行为。正如我们所看到的，添加滚动功能并不是很难自己实现。另外值得一读：Named router outlets in Angular2

路径导航后，Angular2视图不会滚动到顶部

4 个答案: