angular - Angular 延迟加载特定组件上的外部样式和脚本会导致短暂的布局故障

Question

正如我在标题中已经描述的那样，我有一些样式和脚本，我只想在一个特定组件上加载，但这会导致视图出现故障，看起来页面在加载 css 之前显示。有没有办法调整这段代码，首先加载所有css然后显示页面，防止故障发生？

https://stackblitz.com/edit/angular-ivy-sjspyx?file=src/app/app.component.ts

我真的很感激能解决这个问题。

谢谢你。

Answer 1

由于这些样式在编译应用程序时不包括在内，并且仅在组件初始化时添加，即在构造函数中，我认为你最好的选择是添加一个加载指示器（或进度微调器），然后在loadExternalScript功能完成：

constructor(){
// activate loading indicator

// rest of your code

}
private loadExternalScript(scriptUrl: Array<any>) {
    scriptUrl.forEach(function (item) {
      const scriptElement = document.createElement('script');
      scriptElement.src = item;
      scriptElement.async = false;
      scriptElement.defer = true;
      document.body.appendChild(scriptElement);
    });

    // dismiss loading indicator
}