Angular 2中ngAfterViewChecked与clientHeight处理换行时失效问题

首先，你的核心问题出在依赖ngAfterViewChecked的调用次数来触发布局，以及Angular生命周期钩子和浏览器渲染时机的不匹配：

1. 不稳定的触发逻辑：你用numOfTimes == 4来判断何时执行Gridify，但Angular的ngAfterViewChecked触发次数完全取决于组件的变更检测周期——异步数据加载、父组件状态变化都可能改变这个次数，这个判断逻辑非常脆弱。
2. 渲染时机不匹配：ngAfterViewChecked仅保证Angular已经更新了DOM结构，但不保证浏览器完成了所有渲染工作（比如文本换行计算、自定义字体加载）。首次加载时，长文本可能还没完成换行排版，此时clientHeight拿到的是单行文本的高度，导致Gridify计算的top值错误，进而丢失垂直间距；而页面重载时浏览器缓存了字体和渲染资源，排版完成更快，所以高度计算正确。

解决方案 #

方案1：用requestAnimationFrame确保浏览器渲染完成后执行布局

替换你当前的ngAfterViewChecked逻辑，利用浏览器的渲染帧机制，确保在文本排版、字体加载完成后再调用Gridify：

private gridInitiated = false; // 标记是否已完成Gridify初始化

ngAfterViewChecked() {
  const gridElement = document.querySelector('.read-grid');
  if (gridElement && !this.gridInitiated) {
    // 等待浏览器完成当前渲染周期，确保DOM和文本排版都已就绪
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        this.gridify.createGrid(gridElement);
        this.gridInitiated = true; // 标记完成，避免重复执行
      });
    });
  }
}

两次requestAnimationFrame的作用是：第一次等待当前DOM更新后的渲染帧，第二次确保浏览器完成了文本换行、字体加载等后续渲染工作，此时获取的clientHeight就是元素的真实高度。

方案2：监听自定义字体加载（如果使用了非系统字体）

如果你的页面使用了自定义字体，字体未加载完成会直接导致文本高度计算错误，可以通过监听字体加载事件来触发Gridify：

ngAfterViewInit() {
  // 替换成你的自定义字体名称和路径
  const customFont = new FontFace('YourCustomFontFamily', 'url(/assets/fonts/your-font.woff2)');
  
  customFont.load().then(() => {
    document.fonts.add(customFont);
    const gridElement = document.querySelector('.read-grid');
    if (gridElement) {
      this.gridify.createGrid(gridElement);
    }
  });
}

这个方法能确保只有当字体完全加载、文本排版正确后，才进行Gridify布局计算。

额外建议：移除固定次数的判断逻辑

之前的numOfTimes计数完全依赖Angular内部的变更检测次数，在复杂组件场景下很容易失效，用gridInitiated这样的状态标记来控制只执行一次布局，逻辑更可靠。

内容的提问来源于stack exchange，提问作者Peter Højlund Palluth