div 和数据完全渲染后的 Angular 设置滚动位置

Question

我一直在尝试保持包含数百行数据的网格的元素的滚动位置。现在它设置了溢出-y:自动。如果我使用路由器转到不同的页面而不是返回，我希望滚动条位于相同的位置。我认为使用 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;
  }
}

我仍在学习 angular，任何帮助将不胜感激。

问候。

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;
    }
}