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'));

滚动到Angular2中* ngFor循环中的最新添加元素

1 个答案: