将SPA组件映射到AEM组件 map-components

通过Git下载本教程的起点：

$ git clone git@github.com:adobe/aem-guides-wknd-spa.git
$ cd aem-guides-wknd-spa
$ git checkout Angular/map-components-start

使用Maven将代码库部署到本地AEM实例：

$ mvn clean install -PautoInstallSinglePackage

如果使用AEM 6.x，请添加classic配置文件：

$ mvn clean install -PautoInstallSinglePackage -Pclassic

在介绍SPA代码之前，请务必了解AEM提供的JSON模型。 导航到核心组件库并查看文本组件的页面。 核心组件库提供了所有AEM核心组件的示例。

为以下示例之一选择​ JSON ​选项卡：

您应该看到三个属性：text、richText和:type。

:type是一个保留属性，它列出了AEM组件的sling:resourceType（或路径）。 :type的值用于将AEM组件映射到SPA组件。

text和richText是对SPA组件公开的其他属性。

打开新终端并导航到项目中的ui.frontend文件夹。 运行npm install，然后运行npm start以启动​webpack开发服务器：

$ cd ui.frontend
$ npm run start:mock

ui.frontend模块当前设置为使用模拟JSON模型。

您应会看到一个新的浏览器窗口打开http://localhost:4200/content/wknd-spa-angular/us/en/home.html

包含模拟内容的

在您选择的IDE中，打开WKND SPA的AEM项目。 展开ui.frontend模块并打开ui.frontend/src/app/components/text/text.component.ts下的文件​text.component.ts：

第一个要检查的区域是位于第35行的class TextComponent：

export class TextComponent {
    @Input() richText: boolean;
    @Input() text: string;
    @Input() itemName: string;

    @HostBinding('innerHtml') get content() {
        return this.richText
        ? this.sanitizer.bypassSecurityTrustHtml(this.text)
        : this.text;
    }
    @HostBinding('attr.data-rte-editelement') editAttribute = true;

    constructor(private sanitizer: DomSanitizer) {}
}

@Input()修饰符用于声明通过映射JSON对象设置的字段，该对象先前已查看。

@HostBinding('innerHtml') get content()是一种从this.text的值中公开所编写的文本内容的方法。 如果内容是富文本（由this.richText标志确定），将绕过Angular的内置安全性。 Angular的DomSanitizer用于“清理”原始HTML并防止跨站点脚本漏洞。 使用@HostBinding修饰器将方法绑定到innerHtml属性。

接下来，在~第24行检查TextEditConfig：

const TextEditConfig = {
    emptyLabel: 'Text',
    isEmpty: cqModel =>
        !cqModel || !cqModel.text || cqModel.text.trim().length < 1
};

上述代码负责确定何时在AEM创作环境中呈现占位符。 如果isEmpty方法返回​true，则会呈现占位符。

最后，查看第53行以下位置的MapTo调用：

MapTo('wknd-spa-angular/components/text')(TextComponent, TextEditConfig );

MapTo is provided by the AEM SPA Editor JS SDK (@adobe/cq-angular-editable-components). 路径wknd-spa-angular/components/text表示AEM组件的sling:resourceType。 此路径与之前观察到的JSON模型公开的:type匹配。 MapTo​解析JSON模型响应并将正确的值传递给SPA组件的@Input()变量。

您可以在ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/text找到AEM Text组件定义。

通过在ui.frontend/src/mocks/json/en.model.json修改​ en.model.json ​文件来进行试验。

在第62行~行更新第一个Text值以使用​ H1 ​和​ u ​标记：

    "text": {
        "text": "<h1><u>Hello World!</u></h1>",
        "richText": true,
        ":type": "wknd-spa-angular/components/text"
    }

返回浏览器以查看​ webpack开发服务器 ​提供的效果：

尝试在​true / false​之间切换richText属性以查看正在运行的渲染逻辑。

在ui.frontend/src/app/components/text/text.component.html处检查​text.component.html。

此文件为空，因为组件的全部内容由innerHTML属性设置。

在ui.frontend/src/app/app.module.ts处检查​app.module.ts。

@NgModule({
imports: [
    BrowserModule,
    SpaAngularEditableComponentsModule,
    AppRoutingModule
],
providers: [ModelManagerService, { provide: APP_BASE_HREF, useValue: '/' }],
declarations: [AppComponent, TextComponent, PageComponent, HeaderComponent],
entryComponents: [TextComponent, PageComponent],
bootstrap: [AppComponent]
})
export class AppModule {}

未显式包含​TextComponent，而是通过AEM SPA编辑器JS SDK提供的​ AEMResponsiveGridComponent ​动态包含。 因此，必须在​app.module.ts' entryComponents数组中列出。

导航到核心组件库🔗中的图像示例。

src、alt和title的属性用于填充SPA Image组件。

Return to your IDE and open up the en.model.json at ui.frontend/src/mocks/json/en.model.json. Since this is a net-new component for our project we need to "mock" the Image JSON.

At ~line 70 add a JSON entry for the image model (don't forget about the trailing comma , after the second text_386303036) and update the :itemsOrder array.

...
":items": {
            ...
            "text_386303036": {
                "text": "<p>A new text component.</p>\r\n",
                "richText": true,
                ":type": "wknd-spa-angular/components/text"
                },
            "image": {
                "alt": "Rock Climber in New Zealand",
                "title": "Rock Climber in New Zealand",
                "src": "/mocks/images/adobestock-140634652.jpeg",
                ":type": "wknd-spa-angular/components/image"
            }
        },
        ":itemsOrder": [
            "text",
            "text_386303036",
            "image"
        ],

The project includes a sample image at /mock-content/adobestock-140634652.jpeg that is used with the webpack dev server.

You can view the full en.model.json here.

Add a stock photo to be displayed by the component.

Create a new folder named images beneath ui.frontend/src/mocks. Download adobestock-140634652.jpeg and place it in the newly created images folder. Feel free to use your own image, if desired.

Stop the webpack dev server if started.

Create a new Image component by running the Angular CLI ng generate component command from within ui.frontend folder:

$ ng generate component components/image

In the IDE, open image.component.ts at ui.frontend/src/app/components/image/image.component.ts and update as follows:

import {Component, Input, OnInit} from '@angular/core';
import {MapTo} from '@adobe/cq-angular-editable-components';

const ImageEditConfig = {
emptyLabel: 'Image',
isEmpty: cqModel =>
    !cqModel || !cqModel.src || cqModel.src.trim().length < 1
};

@Component({
selector: 'app-image',
templateUrl: './image.component.html',
styleUrls: ['./image.component.scss']
})
export class ImageComponent implements OnInit {

@Input() src: string;
@Input() alt: string;
@Input() title: string;

constructor() { }

get hasImage() {
    return this.src && this.src.trim().length > 0;
}

ngOnInit() { }
}

MapTo('wknd-spa-angular/components/image')(ImageComponent, ImageEditConfig);

ImageEditConfig is the configuration to determine whether to render the author placeholder in AEM, based on if the src property is populated.

@Input() of src, alt, and title are the properties mapped from the JSON API.

hasImage() is a method that will determine if the image should be rendered.

MapTo maps the SPA component to the AEM component located at ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/image.

Open image.component.html and update it as follows:

<ng-container *ngIf="hasImage">
    <img class="image" [src]="src" [alt]="alt" [title]="title"/>
</ng-container>

This will render the <img> element if hasImage returns true.

Open image.component.scss and update it as follows:

:host-context {
    display: block;
}

.image {
    margin: 1rem 0;
    width: 100%;
    border: 0;
}

Open app.module.ts and add the ImageComponent to the entryComponents array:

entryComponents: [TextComponent, PageComponent, ImageComponent],

Like the TextComponent, the ImageComponent is dynamically loaded, and must be included in the entryComponents array.

启动​ webpack开发服务器 ​以查看ImageComponent渲染。

$ npm run start:mock

图像已添加到SPA

停止​webpack开发服务器，并从项目的​ 根 ​中，使用您的Maven技能将更改部署到AEM：

$ cd aem-guides-wknd-spa
$ mvn clean install -PautoInstallSinglePackage

从AEM开始屏幕导航到​工具 > 模板 > WKND SPA Angular。

选择并编辑​SPA页面：

选择​ 布局容器 ​并单击它的​ 策略 ​图标以编辑策略：

在​允许的组件 > WKND SPA Angular - Content >下，检查​ Image ​组件：

已选择

在​默认组件 > 添加映射​下，并选择​ 图像 — WKND SPA Angular - Content ​组件：

输入image/*的​MIME类型。

单击​ 完成 ​以保存策略更新。

在​ 布局容器 ​中，单击​ 文本 ​组件的​ 策略 ​图标：

创建名为​ WKND SPA Text ​的新策略。 在​插件 > 格式 >下，选中所有框以启用其他格式选项：

在​插件 > 段落样式 >下，选中​ 启用段落样式 ​的框：

单击​ 完成 ​以保存策略更新。

导航到​主页 http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html。

您还应该能够编辑Text组件并在​ 全屏 ​模式下添加其他段落样式。

您还应该能够从​ 资产查找器 ​中拖放图像：

通过AEM Assets添加您自己的映像，或者为标准WKND引用站点安装完成的代码库。 WKND引用站点包含可在WKND SPA上重复使用的许多图像。 可以使用AEM的包管理器安装该包。

在IDE中，打开ui.frontend/src/app/components/responsive-grid处的​responsive-grid.component.ts：

import { AEMResponsiveGridComponent,MapTo } from '@adobe/cq-angular-editable-components';

MapTo('wcm/foundation/components/responsivegrid')(AEMResponsiveGridComponent);

AEMResponsiveGridComponent是作为AEM SPA Editor SDK的一部分实现的，并通过import-components包含在项目中。

在浏览器中导航到http://localhost:4502/content/wknd-spa-angular/us/en.model.json

布局容器​组件具有wcm/foundation/components/responsivegrid的sling:resourceType，SPA编辑器使用:type属性识别它，就像Text和Image组件一样。

在SPA编辑器中，可以使用布局模式重新调整组件大小的相同功能。

返回至http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html。 添加其他​ 图像 ​组件，然后尝试使用​ 布局 ​选项重新调整其大小：

重新打开JSON模型http://localhost:4502/content/wknd-spa-angular/us/en.model.json，并观察作为JSON一部分的columnClassNames：

类名aem-GridColumn--default--4指示组件应基于12列网格为4列宽。 有关响应式网格的更多详细信息见此处。

返回到IDE，在ui.apps模块中ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/clientlibs/clientlib-grid处定义了客户端库。 打开文件 less/grid.less。

此文件确定​ 布局容器 ​使用的断点（default、tablet和phone）。 此文件将根据项目规范进行自定义。 当前断点设置为1200px和650px。

您应该能够使用Text组件的响应式功能和更新的富文本策略来创作类似于以下内容的视图：

在Visual Studio Code IDE中，确保已通过Marketplace扩展安装​VSCode AEM Sync：

在项目资源管理器中展开​ ui.content ​模块并导航到/conf/wknd-spa-angular/settings/wcm/templates。

右键单击 templates 文件夹，然后选择​从 AEM 服务器导入：

重复导入内容的步骤，但选择位于/conf/wknd-spa-angular/settings/wcm/policies的​ 策略 ​文件夹。

检查位于ui.content/src/main/content/META-INF/vault/filter.xml的filter.xml文件。

<!--ui.content filter.xml-->
<?xml version="1.0" encoding="UTF-8"?>
 <workspaceFilter version="1.0">
     <filter root="/conf/wknd-spa-angular" mode="merge"/>
     <filter root="/content/wknd-spa-angular" mode="merge"/>
     <filter root="/content/dam/wknd-spa-angular" mode="merge"/>
     <filter root="/content/experience-fragments/wknd-spa-angular" mode="merge"/>
 </workspaceFilter>

filter.xml 文件负责识别随包安装的节点的路径。 请注意每个筛选器上的mode="merge"，这表示现有内容将不会被修改，而是只会添加新内容。 由于内容作者可能会更新这些路径，因此代码部署​ 不会 ​覆盖内容，这一点很重要。 查看 FileVault 文档，了解有关使用过滤器元素的更多详细信息。

比较 ui.content/src/main/content/META-INF/vault/filter.xml 和 ui.apps/src/main/content/META-INF/vault/filter.xml，了解每个模块管理的不同节点。