将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 ​由AEM SPA编辑器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属性以查看正在运行的渲染逻辑。

Inspect text.component.html ​位于ui.frontend/src/app/components/text/text.component.html。

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

在ui.frontend/src/app/app.module.ts上Inspect 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组件。

返回到IDE并在ui.frontend/src/mocks/json/en.model.json处打开en.model.json。 由于这是我们项目的新组件，因此我们需要“模拟”图像JSON。

在第70行，为image模型添加一个JSON条目（不要忘记第二个text_386303036后面的尾随逗号,）并更新:itemsOrder数组。

...
":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"
        ],

该项目在/mock-content/adobestock-140634652.jpeg处包含一个与​ webpack开发服务器 ​一起使用的示例图像。

您可以在此处🔗查看完整的en.model.json。

添加组件要显示的照片库。

在ui.frontend/src/mocks下创建名为​ 图像 ​的新文件夹。 下载adobestock-140634652.jpeg并将其放入新创建的​ images ​文件夹中。 如果需要，您可以随意使用您自己的图像。

如果启动，请停止​ webpack开发服务器。

通过从ui.frontend文件夹中运行AngularCLI ng generate component命令创建新的图像组件：

$ ng generate component components/image

在IDE中，打开位于ui.frontend/src/app/components/image/image.component.ts的​ image.component.ts ​并按照以下方式更新：

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是一种配置，用于根据是否填充了src属性确定是否在AEM中呈现作者占位符。

src、alt和title的@Input()是从JSON API映射的属性。

hasImage()是将确定是否应渲染图像的方法。

MapTo将SPA组件映射到位于ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/image的AEM组件。

打开​ image.component.html ​并按如下方式更新：

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

如果hasImage返回​ true，这将呈现<img>元素。

打开​ image.component.scss ​并按如下方式更新：

:host-context {
    display: block;
}

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

打开app.module.ts并将ImageComponent添加到entryComponents数组：

entryComponents: [TextComponent, PageComponent, ImageComponent],

与TextComponent一样，ImageComponent也是动态加载的，必须包含在entryComponents数组中。

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

$ npm run start:mock

图像已添加到SPA

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

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

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

选择并编辑​ SPA页面：

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

在​ 允许的组件 > WKND SPAAngular — 内容 >下，检查​ 图像 ​组件：

已选择

在​ 默认组件 > 添加映射 ​下，并选择​ 图像 — WKND SPAAngular- 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的​ 策略 ​文件夹。

Inspect位于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以了解每个模块管理的不同节点。