前言
ngx-aem 是一个 npm 包，用于在 Angular 应用中集成 Adobe Experience Manager（AEM），它可以帮助 Angular 开发者轻松地将 AEM 的内容定向到 Angular 应用程序中。本文将详细介绍 ngx-aem 的使用方法，包括安装、配置和示例代码。
安装
在使用 ngx-aem 前，你需要先安装 angular 和 AEM 的客户端库。接下来，执行以下命令：
npm install ngx-aem --save
安装完成后，需要将 ngx-aem 模块导入到你的 Angular 应用程序中：
-- -------------------- ---- -------
------ - ------------ - ---- ----------
-----------
------------- -
------------
--
-------- -
--------------
----------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -配置
在启动 ngx-aem 模块前，你需要在应用程序的主模块（通常为 app.module.ts）中进行配置。这里提供一个示例配置：
-- -------------------- ---- -------
------ - ------------- ------------- - ---- ----------
------ -------- ---------------------------- --------------- ------------ -
------ -
----------------------- ----------------
-------------------------- ---------------------------------------
------------ ---------------------------
------------------ -
-----------
--------------
-------------
--
------------------- ----------
--
-
-----------
---
---------- -
-
-------- -------------
----------- -----------------
----- ---------------
-
-
---
--
------ ----- --------- - -这个配置将会告诉 ngx-aem 对哪些 AEM 内容进行检查，并将其监控到应用程序中。其中，aemClientLibCategories 表示需要加载的 AEM 客户端库，这里只加载了一个名为 angular-app 的客户端库，该客户端库包含了应用程序所需的样式和脚本。aemExperienceFragmentPath 和 aemPagePath 指定了 AEM 内容的路径。allowedComponents 定义了哪些组件类型可以被加载。最后，aemServiceInstance 指定了使用的 AEM 服务实例。
使用
在完成配置之后，我们可以开始使用 ngx-aem 将 AEM 内容嵌入到 Angular 应用程序中了。我们可以使用以下代码片段在模板中加载一个 AEM 经验碎片：
<ng-container *componentOutlet="aemExperienceFragment | async"></ng-container>
该代码片段可以在任何组件的 HTML 模板中使用，其中 aemExperienceFragment 表示经验碎片的名称（该名称需要在上述配置中定义）。
如果需要在应用程序页面中嵌入一个 AEM 页面，则需要使用以下代码：
<ng-container *componentOutlet="aemPage | async"></ng-container>
这里的 aemPage 表示需要加载的 AEM 页面（同样需要在配置中定义）。
示例代码
下面是一个完整的示例代码，展示了如何在 Angular 应用程序中嵌入 AEM 经验碎片和页面：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- ----------
------------
--------- -----------
--------- -
------ ------- --------
------------- --------------------------------------- - ----------------------
------------- ------------------------- - ----------------------
-
--
------ ----- ------------ -
--------------------- - -------------------------------------
------- - -----------------------------------------
------------------- ----------- -------------- --
-在这个示例中，在 AppComponent 的模板中使用了两个 componentOutlet 指令。aemExperienceFragment 和 aemPage 表示在上述配置中定义的 AEM 经验碎片和页面。这里使用了 NgxAemService 的 getComponent() 方法，该方法可以根据在配置中指定的名称获取相应的 AEM 内容。
总结
本文介绍了 ngx-aem 的安装、配置和使用方法，并提供了示例代码。通过 ngx-aem，Angular 开发者可以轻松地将 AEM 的内容定向到 Angular 应用程序中，同时提高了开发效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672663660cf7123b364f1