Aem 基于对话框使组件可链接或不可链接

我有一个组件，希望在对话框中为作者提供添加链接路径的选项。如果填写了这个链接路径，那么我希望组件包装器是

---

有没有比使用数据测试开关创建整个组件的两个独立构建更干净的方法？我遇到过很多这样的例子，其中包装标签/div是由对话框更改的。在我的代码中寻找类似于数据元素在

上的行为的东西。

有多种方法可以实现您想要做的事情

使用

数据sly元素

和

数据sly属性

数据属性

如果属性值为空/空，则不会将属性添加到标记中。因此，如下图所示，如果路径不可用，可以使用它将锚定标记替换为div

---

有多种方法可以实现您的目标

使用

数据sly元素

和

数据sly属性

数据属性

如果属性值为空/空，则不会将属性添加到标记中。因此，如下图所示，如果路径不可用，可以使用它将锚定标记替换为div

---

根据用例的不同，我可能会选择模板解决方案。对于我来说，这种方法感觉更易于重用，尤其是当项目不断发展，组件之间共享了公共（设计）元素时。根据用例的不同，我可能会选择模板解决方案。对于我来说，这种方法感觉更易于重用，尤其是当项目不断增长，并且组件之间共享公共（设计）元素时。

<div class="section" data-sly-test="${!properties.path}">
    <img src="${properties.icon}" alt="${properties.alt}" />
    <div data-sly-test="${properties.heading}">
        <h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
    </div>
</div>
<a href="${properties.path}" class="section" data-sly-test="${properties.path}">
    <img src="${properties.icon}" alt="${properties.alt}" />
    <div data-sly-test="${properties.heading}">
        <h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
    </div>
</a>