Angular2の* ngForループの最新の追加要素にスクロール

Question

私はngForループ描画HTML divを持っています。このループの背後にあるリストは動的です。つまり、ページにリストから要素を追加または削除できるボタンが表示されます。 私が達成したいのは、ユーザがクリックして新しい要素をリストに追加したときに追加された最新の要素にブラウザビューをスクロールすることです。

scrollToView（true）は、新しい要素を追加するjavascript関数に渡すと、* ngForループによってまだ要素がレンダリングされていないため、機能しません。

HTMLページ

<div class="container"><div class="row"> 

<div *ngIf="selection.length <= 0" class="align-sm-right"> 
    <button id="add-selection-default" class="btn app-btn-primary anim-bg" 
      (click)="add()"> 
    <i class="material-icons">add</i><span>Add</span></button> 
</div> 

<div *ngFor="let sel of selection; let index = index; let last = last"> 

    <div id="{{'id' + index}}" class="form-sub-section"> 
    </div> 

</div> 

add() { 
this.selection.push({}); 

// code to scroll to newly added element 

}

ドキュメントを追加するためのメソッド呼び出しは、時を検出するためのonCreateまたは何か他のものを使用して、いくつかのソリューションがあります要素が追加されレンダリングされ、スクロールされますこの特定の要素に？

おかげで、 よろしく、

Answer 1

は個人的に私はng2-page-scroll

このような

constructor(
    private pageScroll: PageScrollService, 
) { 
    PageScrollConfig.defaultDuration = 500; 
    PageScrollConfig.defaultEasingLogic = { 
    ease: (t: number, b: number, c: number, d: number): number => { 
     // ease-in-out easing function 
     if (t === 0) { return b; } 
     if (t === d) { return b + c; } 
     if ((t /= d/2) < 1) { return c/2 * Math.pow(2, 10 * (t - 1)) + b; } 
     return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; 
    } 
    }; 
} 

を使用そして、あなたはページ内の場所に移動したい場合、関連がある場合は

this.pageScroll.start(PageScrollInstance.simpleInstance(document, '#yourLocationId'));