基于内容高度的Angular5 / 6文本大小调整

Question

当前，我正在创建一个幻灯片演示，就像许多网站用来在其屏幕顶部显示促销信息一样，但是我正在显示图像而不是图像。我遇到的问题之一是，如果文本太多或用户以包含大量回车的方式对其进行了格式化，那么将调整内容的大小。也有自动换行。我目前找到了一种解决方案，该解决方案可以在完成如图所示的所有渲染后抓住客户端的高度来部分起作用

decreaseFont() {
    if(!(document.getElementById('postMessage') === null)){
        this.sizeFont = parseInt(window.getComputedStyle(document.getElementById('postMessage')).fontSize.substring(0,2));
        document.getElementById('postMessage').style.fontSize = this.sizeFont.toString() + 'px';
        while (document.getElementById('changeHeight').clientHeight > 675) {
            this.sizeFont--;
            document.getElementById('postMessage').style.fontSize = this.sizeFont.toString() + 'px';
            [...]
        }
    }
} 

这能够调整窗口大小，但是，它有一些我无法弄清楚的奇怪副作用。其中之一是，clientheight有时会检索到比正常值稍小的值，而我无法弄清原因。另一个是，尽管我可以将方法放置在ngAfter视图检查的方法中，但该方法经常被调用，由于html并没有真正改变内容，它仍将尝试使用前一篇文章的字体大小。我想知道你们的方法是什么。

Screenshot

虽然这是一个极端的例子，但它确实显示了我在说什么。这没有任何调整大小，但是我可以立即强制它工作。