ngAfterCiewChecked clientHeight不使用换行符 - Angular 2 app

Question

我有一个Angular 2应用程序，我已设法设置功能Gridify页面。

我用自制的ngAfterViewChecked：

来欺骗它

ngAfterViewChecked() { 
    var selector = document.querySelector('.read-grid');
    // The only reason i'm using numOfTimes is that ngAfterViewChecked is runned 4 times on each pageload. It's fine with only running gridify on the last and fourth time. 
    if (selector != null && this.numOfTimes == 4) { 
      this.gridify.createGrid(selector);
    }
    this.numOfTimes += 1;
  }

它几乎显示应该：5列网格视图。唯一的问题是，在标题较长的某些对象上有一个或两个换行符时，缺少垂直空间（边距）。见图：

如果我重新加载页面，则按原样放置对象。如果我重新加载没有缓存，问题会再次出现。

当Gridify放置它使用的对象.clientHeight时，找到每个元素的top属性。

我发现如果我为每个元素上的标题设置自定义高度 - 例如20px - 一切都正常工作。

所以我的结论是第一个加载.clientHeight设置元素的高度而不考虑较长标题的换行符。怎么会这样？

与ngAfterViewChecked有关吗？是早叫还是我错过了什么？

在Safari，Chrome和Firefox中也是如此，所以它看起来不像浏览器问题。

Answer 1

我发现问题是我用于标题的字体被称为迟到了。

我有一个早期的字体调用＆＃34; Roboto＆＃34;但后来它被改为＆＃34; Libre Baskeville＆＃34;。

那个字体＆＃34; Libre Baskeville＆＃34;比Roboto宽得多，因此标题有.clientHeight无法检测的换行符，因为它根据调用的第一个字体测量高度。

当我将CSS改为只有一个字体调用时 - 一切都按原样运行！