Salesforce LWC学习(九) Quick Action in LWC

咱们在lightning开发中，quick action是一个经常使用的功能，很惋惜的是，lwc目前还不支持单独的custom quick action操做，只能嵌套在aura中使用才能发挥做用。

官方也给咱们提供了如何进行嵌套，简单代码嵌套以下所示：

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId,flexipage:availableForRecordHome">
    <!--This is a lwc component-->  
    <c:testComponentForLwc>
</aura:component>    

咱们只须要声明一个aura的components而后实现force:lightningQuickAction/force:lightningQuickActionWithoutHeader而且使用c:引入相关的lwc便可。这里可能会提到两个问题：

1. 一个对象可能有多个quick action对应多个lwc component，是否须要对应多个aura component仍是一个就能够搞定？
2. lwc不支持quick action因此无法关闭或者调用aura中关闭quick action的方法，那么lwc中如何去关闭quick action弹出的modal？
3. lwc quick action更新某个字段之后无法及时刷新父的详情页面，如何去解决？

针对这两个问题，咱们一个一个进行解决。

针对第一个问题，咱们使用lightning:quickActionAPI 组件，而后调用其getSelectedActions方法获取Promise而后解析便可实现。固然此组件还有不少常常用到的好用的功能，感兴趣的小伙伴本身读一下：https://developer.salesforce.com/docs/component-library/bundle/lightning:quickActionAPI/documentation

针对第二/三个问题，尽管lwc无法获取或者关闭quick action，可是aura component是能够的，咱们只须要在aura中进行事件监听，而后在Lwc component中注册事件便可实现。由于aura的事件监听处理能够捕捉到lwc的事件注册。 OK，那咱们开始直接上代码：

quickActionService.cmp：引入lightning:quickActionAPI从而能够得到当前选择的quick action name，而后根据quick action name去决定显示哪一个lwc组件，而且对testLookUpFowLwc组件进行了两个事件监听处理，分别是refreshview以及closemodal。

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId,flexipage:availableForRecordHome">
    <aura:attribute name="quickActionName" type="String"/>
    <lightning:quickActionAPI aura:id="quickActionAPI" />
    <aura:handler name="init" value="this" action="{!c.doInit}"/>
    <aura:if isTrue="{!v.quickActionName == 'Account.test_another'}">
        <c:testLookUpForLwc onrefreshview="{c.refreshView}" onclosemodal="{!c.closeModal}"/>
    </aura:if>
    <aura:if isTrue="{!v.quickActionName == 'Account.test_action'}">
        show area with test action
    </aura:if>
</aura:component>    

quickActionServiceController.js：对getSelectedActions进行解析，对事件调用force:event事件进行refresh view以及close action。

({
    doInit : function(component, event, helper) {
        var actionAPI = component.find("quickActionAPI");

        actionAPI.getSelectedActions().then(function(result){
            console.log(JSON.stringify(result));
            if(result) {
                console.log(result.actions[0]);
                var actionName = result.actions[0].actionName;
                component.set('v.quickActionName',actionName);
            }
        }).catch(function(e){

        });
    },

    refreshView : function(component,event,helper) {
        $A.get('e.force:refreshView').fire();
    },
    closeModal : function(component,event,helper) {
        $A.get("e.force:closeQuickAction").fire()
    }
})

testLookUpForLwc.html：展现button，点击button按钮执行handleClose

<template>
    <lightning-button type="button" label="submit and close" variant="brand" onclick={handleClose}></lightning-button>
    
</template>

testLookUpForLwc.js：方法注册refreshview以及closemodal事件，从而让父去监听以及执行事件。

import { LightningElement,track } from 'lwc';

export default class TestLookUpForLwc extends LightningElement {
    
    handleClose(event) {
        this.dispatchEvent(new CustomEvent('refreshview'));
        this.dispatchEvent(new CustomEvent('closemodal'));
    }

}

显示效果：咱们在account上建立两个quick action，分别是test_action以及test_another，分别绑定了这个aura，当咱们点击之后test_action之后，打印出来的日志结果。

 

 总结：篇中主要讲述lwc如何配合aura实现quick action以及相关的refresh / close 的功能，针对refresh / close不止针对quick action,针对其余的lwc的设计一样有效。篇中有错误地方欢迎指出，有问题欢迎留言。