注入样式标签+ angular组件计时

Injecting style tag + angular component timing

本文关键字：组件 angular 样式 标签 注入      更新时间：2023-09-26

我有以下一段代码:

//load theme
await theme.load('light');
$state.go('viewer');

的主题。Load加载一个sass文件，编译它，并将其作为样式标签注入，如下所示:

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())
    }
}

第一个控制台日志按预期打印注入的CSS，但是getClientBoundingRect()函数返回宽度:0和高度:0，即使$state.go只在主题之后执行。加载返回，CSS已经被注入。我试过$postLink，同样的事情。尝试替换常规承诺的async/await(可能是一些奇怪的巴别塔行为)，同样的事情。只有使用~100ms的setTimeout，元素才会报告正确的大小。

我想知道这是否与样式和DOM的计算方式有关，或者与angular设置组件的方式有关。什么好主意吗?

找到了答案-通过@import标签加载外部字体，因此延迟了CSS计算

相关文章：