Sightly：在 wcmmode edit 上动态添加组件

Question

我正在为我的 AEM 项目使用 sightly 和 angular 4。我有一个要求，其中我有一个父组件，并且在编辑模式下，父组件应该有一个按钮来添加另一个预先存在的组件。有了这个功能，我可以毫不费力地做到这一点，

addCmp: function () {
    var component = this;
    var cmp = CQ.WCM.getEditable(component.path + '/par/*');
    var flCmp = CQ.WCM.getComponentConfig('path of the component to be added');
    if (cmp.createParagraph(flCmp) === null) {
         console.warn('Could not add pane to this paragraph, check design settings');
    }
}

并且此函数存在于我组件的 clientlibs-wcmedit 中的 dialog.js 中。如何在 AEM

中使用 sightly 和 Angular 4 实现相同的功能

Answer 1

您可以使用 data-sly-test="${wcmmode.edit}" 仅在编辑模式下有条件地呈现某些内容。另见 https://github.com/Adobe-Marketing-Cloud/htl-spec/blob/master/SPECIFICATION.md#211-identifiers and https://helpx.adobe.com/experience-manager/htl/using/global-objects.html

Sightly：在 wcmmode edit 上动态添加组件

Sightly: Adding components dynamically on wcmmode edit

javascript

angular

aem

sightly