跳到内容
达斯

如何在Angular应用程序中添加Theme Switcher Lazy load CSS?

0

角度的应用程序主题切换器

暗模式是当前的趋势功能。因此,今天我将向您展示如何在Angular应用程序中添加主题切换器延迟加载CSS。它将是懒惰的负载,这将对我们的应用程序产生很大的影响。

如何在Angular应用程序中添加Theme Switcher Lazy load CSS?

您有任何演示供参考吗?

是的,OfCourse,您可以在下面查看演示:

正如我们希望我们的应用程序应该快速加载一样。为了实现这一点,我们必须尽可能减小初始束的大小。 #TipsOfTheDay

我苦苦挣扎的问题。

在我的工作期间,我遇到了一个问题,发现不能懒惰加载的CSS文件的名称可以进行哈希处理。 CSS文件的名称可以不进行哈希处理,但是JavaScript文件的名称可以进行哈希处理。我通过导入JavaScript文件而不是CSS文件实现了我的目标。

该问题的解决方案转到 毛豆 .

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

我使用了三个主题: 物料, 日志勒克斯 并找到他们 src /资产/样式 夹。然后,我创建了与每个​​CSS文件相对应的JavaScript文件。

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

内容 {主题名称}.js:

{主题名称} .js
的JavaScript
1
2
3
进口 的CSS “ ./{theme-name}.min.css”;
 
出口 默认 的CSS;


相关的CSS文件已在每个JavaScript文件中默认导入和导出。

查看更多:
主题切换器,如何在Angular应用程序中添加主题切换器延迟加载CSS?
您知道这些针对Angular 9的隐藏调试API吗?
目录确定,在哪里可以使用此调试...

项目目录

项目目录
项目目录

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

为主题切换器创建服务

We’创建一个服务并通过该服务加载主题。一项服务称为 SwitchThemeService 可以使用以下命令生成:

SwitchThemeService服务
的JavaScript
1
ng g s 开关-主题/开关-主题


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

开关主题服务
的JavaScript
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 可以使用以下命令生成:

创建主题切换器的组件
的JavaScript
1
ng g c 开关-主题 -inlineTemplate

为什么–inlineTemplate here?

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

每当我们想使用Angular CLI创建新组件时,通常要做的就是运行以下命令:

的JavaScript
1
> ng 生成 零件 <零件-名称>


或总之

的JavaScript
1
> ng g c <零件-名称>


因此,使用此命令,Angular CLI会生成以下四个文件:

角度的 CLI代码
的JavaScript
1
2
3
4
<零件-名称>.零件.ts
<零件-名称>.零件.html
<零件-名称>.零件.的CSS
<零件-名称>.零件.规格.ts


但是,当我们要生成具有内联模板和样式的组件时,必须在上述命令后提供两个选项。

对于内联模板,我们需要添加 –inlineTemplate=true。默认情况下,其值为false。
对于内联样式,我们需要添加 –inlineStyle=true。默认情况下,其值为false。

好吧,让我们继续前进并添加 SwitchThemeComponent 内容如下:

SwitchThemeComponent组件
的JavaScript
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。

角度的中的主题切换器
角度的中的主题切换器

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

 

0
概要
如何在Angular应用程序中添加Theme Switcher Lazy load CSS?
文章名
如何在Angular应用程序中添加Theme Switcher Lazy load CSS?
描述
暗模式是当前的趋势功能。因此,今天我将向您展示如何在Angular应用程序中添加主题切换器延迟加载CSS。
作者
发布者名称
达斯
出版商徽标
达斯