动态主题离子问题

Question

我正在将Ionic与Angular一起开发应用程序。我引入了动态主题，将两个.scss文件添加到我的theme文件夹中。我有app.scss，其中仅定义了组件的布局而没有颜色。所有颜色都在theme-*.scss文件中。要应用主题，我在<ion-nav>的{​​{1}}元素上使用了一个类。像这样：

app.html

<div [class]="selectedTheme"> <ion-nav [root]="rootPage" ></ion-nav> </div> 是一个假定主题名称的字符串，因此当我使用selectedTheme或(click)这样的事件对其进行更改时，我可以更改应用程序的颜色。

文件(ionChange)具有以下结构：

theme-*.scss

这种方式就像一种魅力，但我有一个我想避免的小问题。我在.dark-theme { ion-header { //colors } ion-content { //colors } } 文件的constructor中设置了默认主题，在著名的app-components.ts隐藏了初始屏幕之前。我的问题是，当启动画面隐藏时，我可以看到具有其布局但未应用正确主题的应用程序。我会在短时间内看到所有白色背景和所有黑色，然后应用了默认主题。我正在platform.ready().then(...)中导入我的自定义主题，我也尝试在variables.scss中导入它们，但是行为仍然相同。似乎在导入主题之前，它只在app.scss中应用布局，并且仅在其应用了所有颜色后才应用导入的主题。有人已经看到这样的东西了吗？

Answer 1

我认为您的问题是由第一道涂料的时间引起的，这是浏览器上的一个属性。离子运行所在的Web视图可以视为一种浏览器。因此，发生相同的问题。

why-first-paint-is-happening-before-domcontentloaded是与您的问题相关的很好的解释。

本页讨论可以在DOM完全加载之前开始绘制。

尤其是，以下链接中引用的段落描述了您的应用程序的相同现象。

  

例如解析器显然无法在处理之前发出Element节点   它的所有属性，但可以在处理时发出节点   它的子树。并且渲染器可以渲染没有节点的节点   孩子们。而且它可能以样式不完整呈现   稍后进行回流焊当javascript插入另一种样式时   工作表或仅仅是因为尚未插入的子节点   影响它的呈现方式。

最后，您不能保证在绘制之前已加载DOM。因此，我认为实际的解决方案是稍后将您的启动屏幕隐藏起来。