AEM 在对话框内访问组件属性

问题描述

我在组件对话框中有以下部分：

            <imgPreview
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="aem-project/components/imgPreview"
                                        baseUrl="https://photo1.com"
                                        name="imgPreview"/>

该组件具有以下属性：

fileReference - String -  https://photo2.com

我想要实现的是 baseUrl=${properties.fileReference} 指向组件属性的 baseUrl。

是否可以直接在对话框内访问组件属性？

解决方法

您说这个 imgPreview 组件在其他组件的对话框中，那么为了方便起见，我会将该“其他组件”的名称称为“父级”。

你要找的是如何在imgPreview中使用parent的“fileReference”属性值，对吧？

我认为这不是您正在寻找的确切方式，但我认为通过这种方式可能会实现您想要的。

在父组件的创作对话框客户端库中创建一个js文件并编写这样的代码。

$(document).on("dialog-ready",function() { 
    // getting fileReference property value inside parent component's dialog
    const fileRefEl = $("[name='./fileReference']");


    // select the tag to use fileReference value inside imagePreview component
    const imgPreviewEl = $(tagSelector);


    if (fileRefEl && imgPreviewEl) {
        // use fileReference value as you want
        // example : imgPreviewEl.attr("src",fileRefEl.val());
    } 
});

你可以在创作对话框clientlibs的js文件中获取parent组件的属性值，也可以直接传入imgPreview组件的html，因为你把 >imgPreview 在对话框中。

如果您想知道如何使用创作对话框客户端库，此视频可能会有所帮助。

在 AEM 中通过 cq 创作对话框添加 JS：https://www.youtube.com/watch?v=wYSRtJXJshk

aem aem-6