ngAfterCiewChecked clientHeight не работает с переносами строк - приложение Angular 2

Question

У меня есть приложение Angular 2, где мне удалось настроить функциональную страницу Gridify .

Я обманываю его с помощью самодельного ngAfterViewПроверено:

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 для каждого элемента.

Я обнаружил, что если я устанавливаю настраиваемую высоту для заголовка для каждого элемента - например, 20 пикселей - все работает так, как должно.

Итак, мой вывод состоит в том, что .clientHeight первой загрузки устанавливает высоту элемента без учета разрывов строк более длинных заголовков. Как это может быть?

Это что-то с ngAfterViewChecked? Это называется рано или что мне не хватает?

То же самое в Safari, Chrome и Firefox, поэтому не похоже, что это проблема браузера.

Answer 1

Я обнаружил, что проблема в том, что шрифт, который я использую для заголовка, был вызван поздно.

У меня был ранний вызов шрифта для "Roboto", но позже он был изменен на "Libre Baskeville".

Этот шрифт "Libre Baskeville" намного шире, чем Roboto, поэтому заголовок содержит разрывы строк, которые .clientHeight не может обнаружить, поскольку он измеряет высоту на основе первого вызванного шрифта.

Когда я изменил CSS, чтобы был только один вызов шрифта - все работало как надо!