无法关闭动态闪电组件

Question

我正在尝试借助$ A.createComponents创建一个动态的闪电组件。

 $A.createComponents([
         ["c:SubmitForApprovalBody",{oppId:recordId}],
         [ "c:SubmitForApprovalFooter", { okLabel : "Confirm"}]            

       ],
       function(components, status){
           console.log('status : '+status);
           if (status === "SUCCESS") {
               modalBody = components[0];
               modalFooter = components[1];                 
               component.find('modalLib').showCustomModal({
                   header: "Submit for Approval",
                   body: modalBody,
                   footer:modalFooter,
                   showCloseButton: false,
                   closeCallback: function() {
                      alert('you decided to close');
                   }
               })
           }
       }
    );

上面很好。而且，我想在用户单击中的“确定”按钮时关闭该组件SubmitForApprovalFooter。

我在SubmitForApprovalFooter中使用了以下内容。

 ({
     handleOK : function(cmp, event, helper) {
        $A.get("e.force:closeQuickAction").fire();
     }
  })

但是没有任何反应，该组件也不会消失。非常感谢您的帮助。

Answer 1

所以我遇到了您几次相同的问题。诀窍是将模式承诺保存为组件上的aura:attribute。

1. 在组件c:SubmitForApprovalFooter中，在类型为onClickAction的名为Aura.Action的组件上创建一个参数
2. 在您的js中将该属性设置为component.get("c.handleModalClose")
3. 在handleModalClose函数中，获取模态承诺参数并从Promise中关闭模态。 （见下文）

({
    yourAction : function(component, event, helper) {
        $A.createComponents([
            ["c:SubmitForApprovalBody",{oppId:recordId}],
            //Notice the `onclickAction` being set
            //If you experience issues with this then use component.getReference("c.handleModalClose")
            [ "c:SubmitForApprovalFooter", { okLabel : "Confirm",
                                            "onclickAction":component.get("c.handleModalClose")
                                        }]
          ],
          function(components, status){
              console.log('status : '+status);
              if (status === "SUCCESS") {
                  modalBody = components[0];
                  modalFooter = components[1];
                  //Set a variable containing the promise                 
                    var modalPromise = component.find('modalLib').showCustomModal({
                      header: "Submit for Approval",
                      body: modalBody,
                      footer:modalFooter,
                      showCloseButton: false,
                      closeCallback: function() {
                         alert('you decided to close');
                      }
                  })
                  //Set the modalPromise as an attribute on your component, type is `Object`
                  //So, `<aura:attribute name="modalPromise" type="Object"/>`
                  component.set("v.modalPromise",modalPromise);
              }
          }
       );
    },
    handleModalClose : function(component,event,helper){
        //I use this all the time now, otherwise aura may try to 
        //grab a modal promise that has been destroyed already
        event.stopPropagation();
        var modPromise = component.get("v.modalPromise");
        modPromise.then(function(m){
            m.close();

        });
    }
})