如何在角度应用中添加主题切换器延迟加载CSS?

0

用于角度应用的主题切换器

暗模式是当前的趋势功能。所以今天我将向您展示如何在角度应用中添加主题切换器懒惰加载CSS。它将是懒惰的负载,这对我们的应用产生了很大的效果。

如何在角度应用中添加主题切换器延迟加载CSS?

你有任何演示吗?

是的,当然,您可以在下面看到演示:

正如我们希望我们的应用程序应该快速加载。为了实现这一目标,我们必须维持尽可能小的初始捆绑尺寸。 #tipsoftheday

我挣扎的问题。

在我的工作期间,我遇到了一个问题,并看到了懒惰地加载的CSS文件的名称无法哈希。可能不会散列CSS文件的名称,但可以散列JavaScript文件的名称。我通过导入JavaScript文件而不是CSS文件来实现了我的目标。

解决这个问题的解决方案 Maosmurf. .

我在这个项目中做了什么?

我使用了三个主题: , 杂志, 和 勒克斯 并找到它们 SRC /资产/风格 文件夹。然后我创建了与每个​​CSS文件对应的JavaScript文件。

资产文件夹的文件目录
资产文件夹的文件目录

内容 {主题名称}.js:


相关的CSS文件在每个JavaScript文件中导入并导出为默认值。

项目目录

项目目录
项目目录

现在我们必须在我们的应用程序中加载这些JavaScript文件。

为主题切换器创建服务

We’LL通过此服务创建服务和加载主题。一个叫做服务 转变themeservice. 可以使用以下命令生成:


在服务文件中添加以下代码:

解释:

  • 选择了这个问题 具有初始值的变量 纲肥,  插入 变量以保持插入DOM元素。
  • 定义了 loadtheme. 懒惰加载JavaScript文件的方法 资产/风格 文件夹。 WebPack的导入功能动态加载JavaScript模块,并将结果作为承诺返回。这 默认 财产的财产 进口 功能结果让我们CSS原始内容。
    处理内容 loadtheme. 方法并将其传递给 插入国 method.
  • 叫做 loadtheme. 构造函数中的方法在应用程序初始化上加载初始主题。
  • 定义了 InsertTodom. 方法作为箭头函数,以创建具有给定内容的样式元素并将此元素插入DOM。如果在之前插入了元素,则该方法会删除旧的。

WebPack包括将导入函数传递给Build输出的JavaScript文件。

为主题切换器创建一个组件

我们将创建一个组件,以便在飞行中更改主题。一个分量命名 转变themecomponent. 可以使用以下命令生成:

为什么–inlineTemplate here?

请跳过本节。如果你知道原因。否则通过单击下面的按钮,通过与您的朋友分享解锁内容。

那么现在让我们前进并添加 转变themecomponent. 内容如下:


在主题之间切换使用选择元素使用 转变themeservice. 在组件中。您已经看到上面的演示和附加该演示的酷GIF。

主题切换器处于角度
主题切换器处于角度

希望你喜欢这篇文章。如果是,请与您的朋友分享,如果没有,请评论我们。

 

0
概括
如何在角度应用中添加主题切换器延迟加载CSS?
文章名
如何在角度应用中添加主题切换器延迟加载CSS?
描述
暗模式是当前的趋势功能。所以今天我将向您展示如何在角度应用中添加主题切换器懒惰加载CSS。
作者
出版商名称
DAS JS.
出版商标志