角度的应用程序主题切换器
暗模式是当前的趋势功能。因此，今天我将向您展示如何在Angular应用程序中添加主题切换器延迟加载CSS。它将是懒惰的负载，这将对我们的应用程序产生很大的影响。
您有任何演示供参考吗？
是的，OfCourse，您可以在下面查看演示：
正如我们希望我们的应用程序应该快速加载一样。为了实现这一点，我们必须尽可能减小初始束的大小。 #TipsOfTheDay
我苦苦挣扎的问题。
在我的工作期间，我遇到了一个问题，发现不能懒惰加载的CSS文件的名称可以进行哈希处理。 CSS文件的名称可以不进行哈希处理，但是JavaScript文件的名称可以进行哈希处理。我通过导入JavaScript文件而不是CSS文件实现了我的目标。
该问题的解决方案转到 毛豆 .
我在这个项目中做了什么？
我使用了三个主题： 物料, 日志和 勒克斯 并找到他们 src /资产/样式 夹。然后，我创建了与每个CSS文件相对应的JavaScript文件。
内容 {主题名称}.js：
|
1 2 3 |
进口 的CSS 从 “ ./{theme-name}.min.css”; 出口 默认 的CSS; |
相关的CSS文件已在每个JavaScript文件中默认导入和导出。
项目目录
现在，我们必须在应用程序中加载这些javascript文件。
为主题切换器创建服务
We’创建一个服务并通过该服务加载主题。一项服务称为 SwitchThemeService 可以使用以下命令生成：
|
1 |
ng g s 开关-主题/开关-主题 |
在服务文件中添加以下代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
进口 { 可注射 } 从 '@角度/核心'; @可注射({ includedIn: '根', }) 出口 类 SwitchThemeService { 选择edTheme = '材料'; insertElement: HTMLElement; 建设者() { 这个.loadTheme(); } loadTheme() { 进口( / * webpackChunkName：“ [请求]” * / `../../资产/秒轮胎/${这个.选择edTheme}.js ` ) .然后((s) => s.默认) .然后(这个.insertToDom); } insertToDom = (内容: 串) => { const 元件 = 文件.createElement('风格'); 元件.textContent = 内容; 文件.头.appendChild(元件); 如果 (这个.insertElement) 这个.insertElement.去掉(); 这个.insertElement = 元件; }; } |
说明：
- 的 选择edTheme 初始值为 材料 insertElement 变量以保留插入的DOM元素。
- 定义了 loadTheme 延迟加载Javascript文件的方法 资产/样式 夹。 Webpack的import函数动态地加载JavaScript模块并返回结果作为Promise。的 默认 的属性 进口 函数结果为我们提供了CSS原始内容。
处理了内容 loadTheme 方法并将其传递给 insertDom 方法。 - 叫做 loadTheme 构造函数中的方法，以在应用程序初始化时加载初始主题。
- 定义了 insertToDom 方法作为箭头函数来创建具有给定内容的样式元素，并将该元素插入DOM。如果之前已插入元素，则该方法将删除旧元素。
Webpack包含JavaScript文件，这些JavaScript文件将传递到导入功能到构建输出。
创建主题切换器的组件
我们将创建一个组件来动态更改主题。名为的组件 SwitchThemeComponent 可以使用以下命令生成：
|
1 |
ng g c 开关-主题 -inlineTemplate |
为什么–inlineTemplate here?
请跳过本节。如果你知道原因。否则，通过单击下面的按钮与您的朋友共享来解锁内容。
好吧，让我们继续前进并添加 SwitchThemeComponent 内容如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
进口 { 零件, 初始化 } 从 '@角度/核心'; 进口 { SwitchThemeService } 从 './switch-theme.service'; @零件({ 选择器: “应用程序切换主题”, 模板: ` <选择 [(ngModel)]=“ service.selectedTheme” (ngModelChange)=“ service.loadTheme（）”> <选项 [ngValue]=“'材料'”>物料</选项> <选项 [ngValue]=“'日志'”>日志</选项> <选项 [ngValue]=“'勒克斯'”>勒克斯</选项> </s选> `, }) 出口 类 SwitchThemeComponent { 建设者(上市 服务： SwitchThemeService) {} } |
主题之间的切换是使用select元素完成的 SwitchThemeService 在组件中。您已经看到了上面的演示，并附加了该演示的漂亮gif。
希望您喜欢这篇文章。如果是，请与您的朋友分享；如果不是，请给我们评论。
