Перейдите к указанной позиции на динамической странице 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 страница запоминает индекс как this.noteIndex в 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) для меня.