無法關閉動態閃電組件

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的組件上創建一個onClickAction類型的Aura.Action
2. 在你的 js 中將該屬性設置為component.get("c.handleModalClose")
3. 在handleModalClose函數中，獲取modal promise 參數並從promise 中關閉modal。 （見下文）

({
    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();

        });
    }
})