在 Angular 中使用编译模板时，组件 $onInit 中不可用的 css 属性

Question

首先是一些上下文。我有一个组件依赖于基于文本宽度的元素的绝对定位。为此，我编写了一个服务来计算给定字符串和包含它的元素的文本宽度。我使用 jQuery 的 .css() 函数来构建一个字体字符串，然后我可以使用它与 canvas API 来获取文本宽度。

function getTextWidth(text, referenceElement) {

    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");

    var fontCss = '';
    fontCss += ' ' + referenceElement.css('font-style');
    fontCss += ' ' + referenceElement.css('font-variant');
    fontCss += ' ' + referenceElement.css('font-weight');
    fontCss += ' ' + referenceElement.css('font-size');
    fontCss += '/' + referenceElement.css('line-height');
    fontCss += ' ' + referenceElement.css('font-family');

    context.font = fontCss;
    return context.measureText(text).width;

}

问题。虽然这在开发中效果很好，但在 QA 中却失败了。 .css() 方法为所有内容返回 undefined。我的调查导致我们在构建过程中将模板编译为 javascript。显然，当 Angular 组件使用 $http 加载的模板时，页面样式会立即应用于它，并且在 $onInit 运行时可用。但是当模板被预加载时，样式在 $onInit 运行时还没有应用。

问题。有没有什么办法可以在代码运行之前应用 $timeout hack 来确保将样式应用于模板？

Answer 1

通常，只需在 $onInit 中添加 $timeout(getTextWidth(yourText, yourElement)) 而不是 getTextWidth(yourText, yourElement)（假设您是这样编写的）就足以确保在质疑其 css 之前正确呈现元素。