angular 路由快照和 aggrid 结合后，导致aggrid 表头消失的问题

本文链接：https://blog.csdn.net/weixin_44050791/article/details/100055460

一，路由快照简述

      1. angular的路由快照，简单的说，就是记录路由访问状态。比如当 访问过A路由加载过A组件之后，再次访问A路由，A组件 不会重新加载 (即不会重新渲染页面，不会重新请求接口)。
      2.试用场景：① 类似浏览器的标签页，在A标签页面把页面滑动到一定位置，又到B标签页阅读其它东西。返回到A标签页面，A标签页面的滑动位置不变。
                              ② 很多后台系统中，会有一个标签下，多个tab的交互。而有时候，从一个tab切换到另一个的tab的时候，需要保存tab页的操作状态
      3. 实现路由快照，可以参考文章1 和文章2

二，aggrid 简述

1. 不再简述，可以参看博主的另一篇博客

三，angular 路由快照和 aggrid 结合后，导致aggrid 表头消失的问题

      1. bug效果        bug源码
       如图：①注意路由的变化
                   ②第二个组件有表格的白色背景，是gif录制软件的问题，可忽略，页面本身没有，可以点击效果路径查看
                   ③ 这个问题，在用户再次手动滑动横向滚动跳到的时候，就会自己得到解决, 但是对此不了解的用户，则不知道这个技巧，所以依然需要解决
在这里插入图片描述

2. 解决后的效果源码 (由于只是修改了组件1的ts文件，所以这里只提供该文件的下载)
在这里插入图片描述

ts1组件主要修改的源码：

  constructor(private router: Router,
    private activatedRoute: ActivatedRoute) {

    this.router.events.subscribe((event) => {
      if (event instanceof NavigationStart && event.url == '/t1') {
        this.ag1._nativeElement.querySelector('.ag-header-viewport .ag-header-container').style.transform = 'translateX(0px)';
      }
    })
    
  }

四，解决的过程

以下的各种尝试都是在 t1组件的构造器函数里面，搭配路由判断进行的。

      1 . 使用refreshHeader 的 aggrid api，未解决
      2 . 使用谷歌，找到了这篇 issue , 里面虽然没有使用angular和路由快照。但是也是表头消失的问题。
             2.1未解决：根据这篇issue 尝试了[suppressColumnVirtualisation]="true", 虽然成功了，但是因为我们的项目没有做分页，动不动就几千条甚至上万条数据，如果禁止了虚拟化，可能会对页面有影响。
             2.2 解决，不理想：根据这篇issue 尝试了 doLayout() 和 2个 setTimeout + autosizeColumn2种方案，未解决。
             2.3 解决，不理想：在这篇issus中有一个小老弟，说：

问题正在发生，因为网格由于某种原因不知道它有多宽，所以它不能正确渲染所有列。
如果你调整浏览器的大小，这应该解决问题（不是说这是一个修复，只是说当网格找到它的真实大小时，那么这个问题就会消失）。

所以使用f12 查看了 dom解决，发现横向滚动条可以滑动的时候，.ag-header-viewport .ag-header-container这个类的width 是1800px，但是当表头消失一会，类的宽度变成了0，所以结合那句话，尝试了手动给类赋值宽度的做法：

  constructor(private router: Router,
    private activatedRoute: ActivatedRoute) {

    this.router.events.subscribe((event) => {
      if (event instanceof NavigationStart && event.url == '/t1') {
        this.ag1._nativeElement.querySelector('.ag-header-viewport .ag-header-container').style.width = '1800px';
        this.gridApi.refreshHeader(); 
      }
    })

  }

这种做法的效果也可以解决，但是不如2.2 的做法理想，因为有的时候也会失效。
2.4 解决：但是发现了一个更加严重的问题， 2.2 和 2.3 虽然解决了快照导致表头空白的问题，但是表头的位置依然是在上次路由离开之前的位置，但是行数据，横竖2个滚动条都复位了。继续查看dom 结构，发现了同一个类下的transform 属性的值，所以尝试了

  constructor(private router: Router,
    private activatedRoute: ActivatedRoute) {

    this.router.events.subscribe((event) => {

      if (event instanceof NavigationStart && event.url == '/t1') {
        this.ag1._nativeElement.querySelector('.ag-header-viewport .ag-header-container').style.width = '1800px';
        this.ag1._nativeElement.querySelector('.ag-header-viewport .ag-header-container').style.transform = 'translateX(0px)';
        this.gridApi.refreshHeader(); 
      }
      
    })

  }

2.5 解决：当去掉手动修改width和刷新表头以后，发现问题已然得到了解决，所以形成了最后的解决方案：

  constructor(private router: Router,
    private activatedRoute: ActivatedRoute) {

    this.router.events.subscribe((event) => {
      if (event instanceof NavigationStart && event.url == '/t1') {
        this.ag1._nativeElement.querySelector('.ag-header-viewport .ag-header-container').style.transform = 'translateX(0px)';
      }
    })

  }