javascript - 注入(inject)样式标签+ Angular 分量计时

Question

我有以下代码:

//load theme
await theme.load('light');

$state.go('viewer');

theme.load 加载一个 sass 文件，编译它，并将它作为样式标签注入(inject)，如下所示:

let themeStyles = document.head.querySelector('style#theme');

if(!themeStyles) {
    themeStyles = document.createElement('style');
    themeStyles.setAttribute('id', 'theme');
    document.head.appendChild(themeStyles);
}

themeStyles.textContent = await importer.import('sass/themes/'+theme+'.scss');

这是我的查看器状态的模板:

<map></map>
<top-left-menu></top-left-menu>
<loader></loader>

这是我的 map 组件:

.component('map', {
    controller: ['$element', MapController]
});

function MapController($element, map) {
    this.$onInit = () => {
        console.log(document.head.querySelector('style#theme').textContent);
        console.log($element[0].getBoundingClientRect())
    }
}

第一个控制台日志按预期打印注入(inject)的 CSS，但是 getClientBoundingRect() 函数返回宽度:0 和高度:0，即使 $state.go 是仅在 theme.load 返回且 css 已注入(inject)后执行。我试过 $postLink，同样的事情。尝试将 async/await 替换为常规 promise (可能是一些奇怪的 babel 行为)，同样的事情。只有使用 ~100 毫秒的 setTimeout 元素才能报告正确的大小。

我想知道这是否与样式和 DOM 的计算方式有关，或者与 Angular 设置组件的方式有关。有什么想法吗？

Answer 1

找到答案 - 正在通过 @import 标签加载外部字体，这会延迟 CSS 评估。