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

Editpage 记住 index 为this.noteIndexin ngOnInit，然后在返回时：

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）。