salesforce 如何访问lwc组件

最新推荐文章于 2024-07-10 17:34:59 发布

灯闵

最新推荐文章于 2024-07-10 17:34:59 发布

阅读量515

点赞数 9

分类专栏： Salesforce 文章标签： Salesforce Apex LWC Aura

本文链接：https://blog.youkuaiyun.com/weixin_40839432/article/details/138310745

版权

Salesforce 专栏收录该内容

2 篇文章

订阅专栏

文章讲述了在LightningWebComponents(LWC)中通过Aurauselwc实现组件访问的不同方法，包括URL参数传递recordId，以及如何通过Aura组件区分新建和编辑页面。还涉及了XML配置和JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

访问lwc有哪些途径呢?

Action Button

xml文件中要配置tab

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" >
    <apiVersion>56.0</apiVersion>
    <isExposed>true</isExposed>
        <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__Tab</target>
         <target>lightning__RecordAction</target>
    </targets>
</LightningComponentBundle>

在这里插入图片描述

Tab

在这里插入图片描述

xml文件中要配置tab

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" >
    <apiVersion>56.0</apiVersion>
    <isExposed>true</isExposed>
        <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>

Aura use lwc

在正常的lwc文件上,创建一个aura组件
lwc js文件中 @api recordId;

Aura cmp文件:

<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId,lightning:actionOverride,force:appHostable,lightning:isUrlAddressable,force:lightningQuickActionWithoutHeader,forceCommunity:availableForAllPageTypes,lightning:hasPageReference">
	    <aura:handler name="change" value="{!v.pageReference}" action="{!c.reInit}"/>
	  <c:salesOrderConfirmLwc recordId="{!v.recordId}"></c:salesOrderConfirmLwc>
</aura:component>


js文件:

({
    init : function(component, event, helper) {
        //从url取门店的Id字符串,从VF传入
        var pageRef = component.get("v.pageReference");

        if(pageRef != undefined && pageRef != "" && pageRef != null){
            var orderIdStr = component.get("v.pageReference.state.c__recordId");
            console.log("orderIdStr"+JSON.stringify(orderIdStr));
            component.set("v.recordId" , orderIdStr);
        }
    },
    reInit : function(component, event, helper) {
        $A.get('e.force:refreshView').fire();  
    },
})

可通过url带参进aura访问lwc:
/lightning/cmp/c__SalesOrderConfirmCmp?c__recordId={!Order__c.Id} 

或者aura直接覆盖标准按钮访问lwc(一个aura可以同时覆盖新建跟编辑)
这个直接拿到recordId

(拓展)如何区分是新建页面还是编辑页面

import { CurrentPageReference, NavigationMixin } from 'lightning/navigation';
import { LightningElement, wire, track, api} from 'lwc';

export default class salesOrderCreateLwc extends NavigationMixin(LightningElement) {
 	@api recordId;
    @wire(CurrentPageReference) pageRef;
    
    connectedCallback() {
        console.log("pageRef->"+ JSON.stringify(this.pageRef));
        let actionName = this.pageRef.attributes.actionName;
        this.recordId = this.pageRef.attributes.recordId;
        console.log("actionName->"+actionName);
        console.log("recordId->"+this.recordId);
        if (actionName == 'edit') {
        }
    }
}