介绍
fuse-box-ng-template-plugin 是一个使用 FuseBox 打包工具的插件，用于将 Angular 应用中的 HTML 模板转换为 JavaScript 模块。这样可以将模板与应用代码一起打包，并实现更高效的预加载，提高应用性能。
安装
首先需要安装 FuseBox 和 fuse-box-ng-template-plugin：
npm install fuse-box --save-dev npm install fuse-box-ng-template-plugin --save-dev
使用
在 FuseBox 的配置文件中引入该插件：
-- -------------------- ---- ------- ----- - ------- - - -------------------- ----- - ---------------- - - --------------------------------------- ----- ---- - --- --------- -------- ------ ------- ---------------- -------- - ------------------- -- ---展开代码
然后在 Angular 组件中使用 ng-template-loader 标记模板文件：
<ng-template-loader path="./template.html"></ng-template-loader>
最后在组件中导入模板：
import * as template from './template.html';
示例
假设有以下目录结构：
. ├── src │ ├── app │ │ ├── app.component.ts │ │ └── template.html │ └── index.ts └── fuse.js
其中 app.component.ts 文件内容如下：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - -- -------- ---- ------------------ ------------ --------- ----------- --------- --------- -- ------ ----- ------------ - ----- - --------- -展开代码
template.html 文件内容如下：
<h1>{{title}}</h1> <p>Welcome to {{title}}!</p>
FuseBox 的配置文件 fuse.js 内容如下：
-- -------------------- ---- ------- ----- - ------- - - -------------------- ----- - ---------------- - - --------------------------------------- ----- ---- - --- --------- -------- ------ ------- ---------------- -------- - ------------------- -- --- -------------------- ---------------- ---------- ---------展开代码
在终端中执行 npm run start 启动 FuseBox，即可在浏览器中访问打包后的应用，并查看效果。
结论
通过使用 fuse-box-ng-template-plugin 插件，可以将 Angular 应用中的 HTML 模板转换为 JavaScript 模块，实现更高效的预加载，提升应用性能。此外，插件的使用也非常简单，只需要在 FuseBox 的配置文件中引入插件并在组件中使用特定标记即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/54365
