Question

我一直在努力保持元素的滚动位置，其中包含数百行数据的网格。现在它设置为overflow-y：auto。如果我使用路由器去不同的页面，而不是回去，我希望滚动位于相同的位置。我认为使用ngAfterViewInit会做到这一点，但不幸的是它不起作用。如果我使用控制台启动设置位置命令它工作正常。我想问题是在调用ngAfterViewInit时行仍然被加载但尚未呈现。

@Component({
  selector: 'grid',
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.scss']
})
export class GridComponent implements OnInit, OnDestroy {

  @Input() rows: Array<Row>;
  @Input() someKindOfGridId: string;
  localGridConfigValue: ILocalGridConfigValue;

  constructor(private configService: ConfigService) { }

  ngOnInit() {
    this.localGridConfigValue = this.configService.getConfigForCurrentGrid(this.someKindOfGridId);
  }

  ngAfterViewInit(){
    document.getElementById(this.someKindOfGridId).scrollTop = this.localGridConfigValue.gridScrollTopPos;
  }

  ngOnDestroy() {
    this.localGridConfigValue.gridScrollTopPos = document.getElementById(this.someKindOfGridId).scrollTop;
  }
}

我仍在学习角度，我们将非常感谢任何帮助。

问候。

Answer 1

我设法使用来自@Andresson的提示来解决这个问题，但是DoCheck还不够，我使用了ngAfterViewChecked。重要的是我必须确保设置滚动位置只会被设置一次。

@Component({
  selector: 'grid',
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.scss']
})
export class GridComponent implements OnInit, OnDestroy {

  @Input() rows: Array<Row>;
  @Input() someKindOfGridId: string;
  localGridConfigValue: ILocalGridConfigValue;
  rowsCount: number = 0;
  scrolled: boolean = false;

  constructor(private configService: ConfigService) { }

    ngOnInit() {
        this.localGridConfigValue = this.configService.getConfigForCurrentGrid(this.someKindOfGridId);

         this.scrolled = false;
    }

    ngAfterViewChecked() {
        let newRowsCount = this.rows.length;
        if (newRowsCount <= 0 || !this.rowsCountChanged(newRowsCount) || this.scrolled)
            return;

        document.getElementById(this.someKindOfGridId).scrollTop = this.localGridConfigValue.gridScrollTopPos;
        this.rowsCount = newRowsCount;
        this.scrolled = true;
    }

    private rowsCountChanged(newRowsCount: number): boolean {
        return newRowsCount !== this.rowsCount;
    }

    ngOnDestroy() {
        this.localGridConfigValue.gridScrollTopPos = document.getElementById(this.someKindOfGridId).scrollTop;
        this.scrolled = false;
    }
}

Answer 2

@MateuszMigała 的解决方案有效。我们可以通过检查集合的变化来改进它。

import { Component, IterableDiffers, OnInit } from '@angular/core';

@Component({
  selector: 'grid',
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.scss']
})
export class GridComponent implements OnInit, OnDestroy {

  @Input() rows: Array<Row>;
  @Input() someKindOfGridId: string;
  localGridConfigValue: ILocalGridConfigValue;
  rowsCount: number = 0;
  scrolled: boolean = false;
  private iterableDiffer;

  constructor(private configService: ConfigService,
    private iterableDiffers: IterableDiffers) {
    this.iterableDiffer = iterableDiffers.find([]).create(null);
  }

  ngOnInit() {
    this.localGridConfigValue = this.configService.getConfigForCurrentGrid(this.someKindOfGridId);

    this.scrolled = false;
  }

  ngAfterViewChecked() {
    if (this.scrolled) {
      return;
    }
    else {
      let changes = this.iterableDiffer.diff(this.rows);
      if (!changes)
        return;

      document.getElementById(this.someKindOfGridId).scrollTop = this.localGridConfigValue.gridScrollTopPos;
      this.scrolled = true;
    }
  }


  ngOnDestroy() {
    this.localGridConfigValue.gridScrollTopPos = document.getElementById(this.someKindOfGridId).scrollTop;
    this.scrolled = false;
  }
}

div和数据完全呈现后的角度设置滚动位置

2 个答案: