Salesforce LWC学习(九) Quick Action in LWC

时间:2019-12-24 zero.zhang 人气:0

我们在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即可。这里可能会提到两个问题：

一个对象可能有多个quick action对应多个lwc component，是否需要对应多个aura component还是一个就可以搞定？
lwc不支持quick action所以没法关闭或者调用aura中关闭quick action的方法，那么lwc中如何去关闭quick action弹出的modal？
lwc quick action更新某个字段以后没法及时刷新父的详情页面，如何去解决？

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

针对第一个问题，我们使用lightning:quickActionAPI 组件，然后调用其getSelectedActions方法获取Promise然后解析即可实现。当然此组件还有很多经常用到的好用的功能，感兴趣的小伙伴自己读一下：https:/https://img.qb5200.com/download-x/developer.salesforce.comhttps://img.qb5200.com/download-x/docs/component-library/bundle/lightning:quickActionAPIhttps://img.qb5200.com/download-x/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的设计同样有效。篇中有错误地方欢迎指出，有问题欢迎留言。

加载全部内容