html - 导航到动态 Angular 2 页面上的指定位置

Question

如果我在 *ngFor 上生成了多个元素的页面上向下滚动，单击一个元素会通过路由器将我带到另一个页面。当我单击按钮返回上一页时，我希望屏幕向下滚动到我离开页面之前所在的位置。

我怎样才能做到这一点？

Answer 1

假设 List 页面有 ngFor 循环，如下所示:

<div *ngFor="let note of (noteService.notes | async); let i = index" class="item" tabindex="0">
  <a (click)="edit(note, i, $event)">
    {{note.text}}
  </a>
</div>  

在 edit 函数中，它提供了额外的 url 索引，如 ...?i=11:

this.router.navigate(['group', this.noteService.groupName, 'edit', note.$key],
  { queryParams: { i: index } }); // pass in additional index in ngFor loop

Edit 页面在 ngOnInit 中记住索引为 this.noteIndex，然后返回时:

this.router.navigate(['group', this.noteService.groupName],
  { queryParams: { i: this.noteIndex } }); // to let List page focus this note

然后List页面的ngOnInit可以做如下:

this.noteService.announcedCountNotes.subscribe(
  count => {
    // noteService announces new count after it saves edit
    // so by now, ngFor should be ready
    if (idxToFocus) { // this.route.snapshot.queryParams['i'];
      setTimeout(_ => {
        var elements = document.querySelectorAll('div.item');
        var len = elements.length;

        if (len > 0 && idxToFocus >= 0 && idxToFocus < len) {
          const el = elements[idxToFocus] as HTMLElement;
          //el.scrollIntoView();
          el.focus();
        }
      }, 0);
    }
  }
)

你可能想为 div.item:focus 提供特定的样式，这种方式至少对我来说在 Chrome 59(Windows 7 和 iPad)上有效。