介绍
elm-angular-lib 是一个基于 Angular 框架的 Elm 库封装，它提供了一种更加轻便、简单的方式，让使用者能够在 Angular 应用中快速便捷地使用 Elm 库。
安装
您可以使用 npm 来安装 elm-angular-lib 包:
npm install --save elm-angular-lib
安装完成后，您需要配置 elm-make 环境变量，因为 elm-angular-lib 运行需要使用 Elm 编译器，以下是 elm-make 环境变量的设置方式：
export PATH="$PATH:/usr/local/bin/elm-make"
使用
引入 Elm 库
首先，您需要在 Angular 的模块中引入 Elm 库：
import { ElmLibraryModule } from 'elm-angular-lib';接下来，您可以在 @NgModule 的 imports 数组中添加 ElmLibraryModule：
imports: [ ... ElmLibraryModule ]
使用 Elm 库
ElmLibraryModule 提供了 ElmLibraryService 服务，您可以通过它来使用您的 Elm 库：
-- -------------------- ---- -------
------ - ----------------- - ---- ------------------
------------
--------- -----------
--------- -
------ ------- -------
-
--
------ ----- ------------ ---------- ------ -
-------- -------
------------
------- ------------------ -----------------
- --
----------- ---- -
------------------------------------ ------------ -
-------- ------ -----
---------------- -- -
------------ - --------------------------------- -- -
-------------------- ---- ------ -----
---
---
-
-解析：
在这个例子中，我们首先在 imports 中引入 ElmLibraryModule，并在 constructor 中注入了 ElmLibraryService。
在 ngOnInit() 方法中，我们使用 elmLibraryService 的 embed() 方法将 Elm 模块嵌入到 container 元素中。embed() 方法接受三个参数：
- 第一个参数是 Elm 模块中定义的
Main函数； - 第二个参数是一个 HTML 元素的 ID，它用于在应用中创建一个嵌套的 Elm 环境；
- 第三个参数是一个 JavaScript 对象，其中包含了传递给 Elm 模块的初始值。
最后，在嵌入的 Elm 模块中，我们使用 Elm 的端口 toAngular 与 Angular 进行通信， app.ports.toAngular.subscribe() 接受一个回调函数，当 Elm 向端口发送消息时，这个回调函数就会被触发。
至此，您便学会了如何在 Angular 应用中使用 Elm 库，但如果您还不熟悉 Elm 开发的可以去 Elm 官网进行学习。
示例代码
我们来编写一个 Elm 库并将其嵌入到 Angular 应用中。
在 Command-line 中使用 Elm 构建工具创建一个新的 Elm 应用:
elm init
然后，我们创建两个文件 src/Main.elm 和 src/index.js。
首先，让我们创建一个简单的 Elm 可交互的组件：
src/Main.elm
-- -------------------- ---- -------
------ ---- -------- ------
------ ---- -------- ----
------ ----------- -------- ----
------ --------------- -------- ----
---- ---
- ---------
- ---------
---- ----- ----- -
- ----- - --- -
---- - -----
---- -
- ----- - - -
------ - --- -- ----- -- -----
------ --- ----- -
---- --- --
--------- --
- ----- - ----- - ----------- - - -
--------- --
- ----- - ----- - ----------- - - -
---- - ----- -- ---- ---
---- ----- -
--- --
- ------ - ------- --------- - - ---- --- -
- --- -- - ---- --------------- ------------ -
- ------ - ------- --------- - - ---- --- -
-
---- - ------- -- ----- ---
---- -
--------------------
- ----- - ----
- ---- - ----
- ------ - ------
-这是一个简单的记录数字的 Elm 组件，它包括一些 HTML 元素和相应的事件监听，其中 init 定义了模型， update 定义了更新模型的方式，以及 view 定义了展示的视图。
然后我们需要将 Elm 库编译成 JavaScript 代码，使用以下命令：
elm make src/Main.elm --output=src/elm.js
将 src/elm.js 文件引入到 src/index.js 文件中：
src/index.js
import { Elm } from "./elm.js";
window.addEventListener('load', () => {
const container = document.getElementById('container');
Elm.Main.init({ node: container });
});现在，我们可以在 Angular 应用中使用这个 Elm 库了。
在 Angular 应用中，创建一个 src/app/app.component.ts 组件，并将 Elm 库嵌入到它的模板中：
src/app/app.component.ts
-- -------------------- ---- -------
------ - ----------------- - ---- ------------------
------ - ---------- ------ - ---- ----------------
------------
--------- -----------
--------- -
----------- -- ---------------------
---- ---------------------
-
--
------ ----- ------------ ---------- ------ -
------------
------- ------------------ -----------------
- --
----------- ---- -
------------------------------------ -------------
-
-在浏览器中查看 Angular 应用，我们就可以看到如下图所示的 Elm 库被嵌入到了 Angular 应用中：
至此，您已经掌握了 elm-angular-lib 包的使用方法，您的前端技术构建已经更上了一层楼！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600563d481e8991b448e12c1