動的Angular 2ページの指定された位置にナビゲート

Question

* ngForで複数の要素が生成されたページをスクロールダウンした場合、要素をクリックすると、ルータ経由で別のページに移動します。 ボタンをクリックして前のページに戻ると、ページを出る前の位置に画面がスクロールされます。

どうすればこの問題を解決できますか？

Answer 1

のは、仮定しようListページngForループのようにあります。そして、

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

EditページがngOnInitにthis.noteIndexとしてインデックスを覚えている：

<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機能では、それは...?i=11のようなURLに追加のインデックスを提供します戻るとき：

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のための特定のスタイルを提供する場合があります

は、この方法は私のために少なくともクロム59（Windows 7とiPadの）に取り組みました。