访问lwc有哪些途径呢?
- Action Button
- Tab
- Aura use 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') {
}
}
}