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