标签：ons bre eof set EAP 部分 err class ror
lwc是可以设置一个lightning__UtilityBar的target，从而直接放在utility bar里。但有两个缺点，一是这样只能显示在弹出窗口，二是弹出窗口不能自动关闭。
通过将lwc包装在aura组件，从而调用workspace API和utlitybar API，可以实现这两个功能。
第一个aura组件lwcWrapper，包装lwc。lwcWrapper.cmp:
<aura:component implements="flexipage:availableForAllPageTypes,lightning:isUrlAddressable,lightning:availableForFlowScreens,force:appHostable" access="global" > <div class="slds-theme_default"> <c:mylwc name="MyLWC" /> </div> </aura:component>
这个div的作用是让大部分背景显示成白色。
第二个aura组件openLwc，调用workspace API和utlitybar API。openLwc.cmp:
<aura:component implements="flexipage:availableForAllPageTypes,lightning:isUrlAddressable,lightning:availableForFlowScreens,flexipage:availableForRecordHome" access="global" > <lightning:workspaceAPI aura:id="workspace"/> <lightning:utilityBarAPI aura:id="utilitybar" /> <aura:handler name="init" value="{!this}" action="{!c.init}" /> </aura:component>
openLwcController.js:
({ init: function(component, event, helper) { var utilityAPI = component.find("utilitybar"); utilityAPI.getAllUtilityInfo().then(response => { if (typeof response !== ‘undefined‘) { utilityAPI.getEnclosingUtilityId().then(utilityId => { utilityAPI.onUtilityClick({ eventHandler: response => helper.openMyLwc(component, event, helper) }).catch(error => console.log(‘onUtilityClick: eventHandler error: ‘ + error)); }) .catch(error => console.log(‘init: utilId error: ‘ + error)); } }); } })
openLwcHelper.js:
({ openMyLwc:function(component, event, helper) { var workspaceAPI = component.find("workspace"); workspaceAPI.getAllTabInfo().then(tabInfo => { let isExisting = false; let tabId = null; let utilityAPI = component.find("utilitybar"); if (tabInfo && tabInfo.length > 0) { for (let i = 0; i < tabInfo.length; i++) { if (tabInfo[i].url.indexOf(‘c__lwcWrapper‘) > -1) { isExisting = true; tabId = tabInfo[i].tabId; break; } } if (isExisting) { //console.log(tabId); workspaceAPI.focusTab({tabId: tabId}) .then(result => helper.minimizeUtility(utilityAPI)).catch(console.log); } } if (!isExisting) { workspaceAPI.openTab({ pageReference: { "type": "standard__component", "attributes": { "componentName": "c__lwcWrapper" } }, focus: true }).then(tabId => { //console.log("The new tab ID is:" + tabId); workspaceAPI.setTabLabel({ tabId: tabId, label: "My Lwc" }) .then(tabInfo => helper.minimizeUtility(utilityAPI)).catch(console.log); }).catch(console.log); } }); }, minimizeUtility: function(utilityAPI) { utilityAPI.minimizeUtility().catch(console.log); } })
因为缺省情况下，tab页的标签显示为Loading...，所以用setTabLabel来设置一下。如果tab页已打开，则聚焦到已打开的tab页，而不重复打开。
标签：ons bre eof set EAP 部分 err class ror
原文地址：https://www.cnblogs.com/badnumber/p/14939173.html
